Das Dropdown-Menü Bootstrap- Menü erläutert das Dropdown-Menü, beinhaltet jedoch nicht den Interaktionsteil. In diesem Kapitel wird die Interaktion des Dropdown-Menüs im Detail erläutert. Mit dem Dropdown -Plugin können Sie jeder Komponente Dropdown -Menüs hinzufügen (z. B. Navigationsleisten, Registerkarten, Kapselnavigationsmenüs, Schaltflächen usw.).
Wenn Sie die Funktionalität des Plugins separat verweisen möchten, müssen Sie Dropdown.js verweisen. Oder, wie im Kapitel "Bootstrap Plugin" erwähnt, können Sie unter Bootstrap.js oder komprimierten Versionen von Bootstrap.min.js verweisen.
1. Nutzung
Sie können den versteckten Inhalt des Dropdown -Menü -Plugins (Dropdown) umschalten:
1. Verwenden Sie das Datenattribut: Data-Toggle = "Dropdown" zum Link oder der Schaltfläche hinzufügen, um das Dropdown-Menü zu wechseln, wie unten gezeigt:
<div> <a data-toggle = "Dropdown" href = "#"> Dropdown-Auslöser </a> <ul rollen = "Menü" Aria-labelledby = "dlabel"> ... </ul> </div>
Wenn Sie den Link intakt halten müssen (nützlich, wenn der Browser JavaScript nicht aktiviert), verwenden Sie die Data-Ziel-Eigenschaft anstelle von href = "#":
<div> <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html"> Dropdown menu (Dropdown) <span></span> </a> <ul role="menu" aria-labelledby="dLabel"> ... </ul></div>
2. Über JavaScript: Um JavaScript zu wechseln, verwenden Sie bitte die folgende Methode:
$ ('. Dropdown-Toggle'). Dropdown ()
2. Einfaches Beispiel für das Dropdown-Menü
Im Allgemeinen entspricht der Code mit Komponentenmethoden:
//Declarative usage<div> <button data-toggle="dropdown"> drop-down menu<span></span> </button> <ul> <li><a href="#">Home</a></li> <li><a href="#">Product</a></li> <li><a href="#">Information</a></li> <li><a href = "#"> über </a> </li> </ul> </div>
Der Schlüsselkern der deklarativen Verwendung:
1. Verwenden Sie Pakete für periphere Behälter;
2. Bindungsdaten-Toggle = "Dropdown" für interne Klick-Schaltflächenereignisse;
3. Verwenden Sie Menüelemente.
// Wenn sich die Taste außerhalb des Containers befindet, kann sie durch Daten-Ziel gebunden werden. <button id = "btn" data-toggle = "Dropdown" data-target = "#Dropdown"> In JavaScript-Aufrufen gibt es keine Eigenschaften und die Methode ist nicht einfach zu verwenden. Im Folgenden sind vier grundlegende Ereignisse. // Dropdown-Menümethode, aber noch Daten benötigen-*$ ('#btn'). Dropdown (); $ ('#btn'). Dropdown ('Toggle');Das Dropdown-Menü unterstützt 4 Arten von Ereignissen, die dem vor dem Popup entsprechenden Ereignissen nach dem Schließen und nach dem Schließen entsprechen.
// Ereignisse, andere ähnliche $ ('#Dropdown'). On ('show.bs.dropdown', function () {alert ('Freaks sofort, wenn die Show -Methode genannt wird!');});3. Verwendung von Dropdown-Menüs auf der Registerkarte Seite
<! DocType html> <html> <Head> <titels> Bootstrap -Instanz - Tag -Seite mit Dropdown -Menü </title> <link href = "/bootstrap/css/bootstrap.min src="/bootstrap/js/bootstrap.min.js"></script><body> <p> Tag page with drop-down menu</p><ul> <li><a href="#">Home</a></li> <li><a href="#">SVN</a></li> <li><a href="#">iOS</a></li> <li> <a href = "#"> vb.net </a> </li> <li> <a data-toggle = "Dropdown" href = "#"> java <span> </span> </a> <ul> <li> <a href = "#"> swing </a> <li> <li> <a href = " href = "#"> ejb </a> </li> <li> <a href = "#"> signierter Link </a> </li> </li> </li> <li> <a href = "#"> php </a> </li> </ul> </body> </html> </html> </html> php
Reproduktionsbild:
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das Obige dreht sich alles um diesen Artikel, ich hoffe, es wird für das Lernen aller hilfreich sein.