Warum funktioniert mein Bootstrap 5-Navigationsleisten-Dropdown nicht einmal mit jQuery?-js-Tutorial-php.cn

Warum funktioniert mein Bootstrap 5-Navigationsleisten-Dropdown nicht einmal mit jQuery?

Susan Sarandon

Freigeben： 2024-12-08 19:32:14

Original

179 Leute haben es durchsucht

Why isn't my Bootstrap 5 navbar dropdown working even with jQuery?

Problem mit dem Dropdown-Menü der Bootstrap 5-Navigationsleiste

Beim Versuch, ein responsives Navigationsmenü mit Bootstrap 5 zu implementieren, kann es bei Benutzern zu einem Problem mit der Dropdown-Schaltfläche kommen oder der Menüpunkt funktioniert nicht wie vorgesehen. Dieses Problem kann auch dann auftreten, wenn jQuery im Projekt enthalten ist.

Ursache

In Bootstrap 5 haben sich die data-*-Attribute für JavaScript-Plugins geändert. Zuvor wurden data-toggle und data-target verwendet, aber in Bootstrap 5 wurden sie durch data-bs-toggle bzw. data-bs-target ersetzt.

Lösung

Um das Problem zu beheben, ersetzen Sie die alten data--Attribute durch die neuen data-bs- Attribute:

<button>

Nach dem Login kopieren

Zusätzliche Überlegungen

Neben der Änderung der Daten-*-Attribute führt Bootstrap 5 auch andere Änderungen ein. Beispielsweise wurden die Klassen ml-auto und mr-auto durch ms-auto und me-auto ersetzt.

Demo

Dieser Codeausschnitt demonstriert das funktionierende Dropdown Schaltfläche:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bootstrap</title>
    <link
        href="https://cdn.jsdelivr.net/npm/[email&#160;protected]/dist/css/bootstrap.min.css"
        rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous"
    />
</head>
<body>
    <nav>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein Bootstrap 5-Navigationsleisten-Dropdown nicht einmal mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!