suchen

Heim >Web-Frontend >js-Tutorial >Warum funktioniert mein Bootstrap 5-Navigationsleisten-Dropdown nicht einmal mit jQuery?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-08 19:32:14251Durchsuche

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>

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>

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!

JavaScript jquery bootstrap for auto using function this issue mr Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie kann ich Objekte mit bestimmten Attributen in einem JavaScript-Array effizient finden?Nächster Artikel：Wie kann ich Objekte mit bestimmten Attributen in einem JavaScript-Array effizient finden?

In Verbindung stehende Artikel

Mehr sehen