Warum funktioniert mein Bootstrap 5-Navigationsleisten-Dropdown nicht einmal mit 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></button>

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:

    <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/%5Bemail%C2%A0protected%5D/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">


    <nav></nav>

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!