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 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!