Das beste Bootstrap Drop-Down-Menü (Dropdown) Widget-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Verwendung,Beispiele,Beispiele,Optionen,Weg,Beispiele, lernen
Bootstrap Drop-Down-Menü (Dropdown) Widget
Bootstrap Drop - Down - Menü Dieses Kapitel erläutert das Drop-Down - Menü, aber nicht auf die Interaktion Teil im Zusammenhang mit diesem Kapitel ausführlich die Wechselwirkung des Drop-Down - Menü erklärt. Verwenden Sie das Pull-Down-Menü (Dropdown) Plug-in, können Sie ein Dropdown-Menü, um eine der Komponenten hinzufügen können (wie zum Beispiel Navigationsleiste, Tabs, Kapseln, Navigationsmenüs, Knöpfe, etc.).
Wenn Sie auf die einzelnen Plug-in - Funktionen beziehen möchten, müssen Siedropdown.js zu verweisen.Oder, wie Bootstrap - Plugin Übersicht Kapitel erwähnt, können Sie aufbootstrap.jsoder komprimierte Version vonbootstrap.min.js beziehen.
Verwendung
Sie können ausblenden Dropdown-Menü umschalten (Dropdown) Plug-in:
- Durch die Datenattribute:ein Link oder Button -Daten-Togglehinzufügen= "Dropdown"Drop-Down - Menü zu wechseln, wie folgt:
<Div class = "Dropdown">
<a data-toggle="dropdown" href="#"> Dropdown-Menü (Dropdown) Trigger </a>
<Ul class = "Drop-Down-Menü" role = "Menü" aria-labelledby = "dlabel">
de.
</ Ul>
</ Div>
Wenn Sie den Link intakt (nützlich , wenn der Browser nicht JavaScript aktiviert ist) zu halten brauchen, bitteAttributdaten-Ziel verwenden , anstatt href = "#":
<Div class = "Dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page">
Pull-Down-Menü (Dropdown) <span class = "Caret"> </ span>
</a>
<Ul class = "Drop-Down-Menü" role = "Menü" aria-labelledby = "dlabel">
de.
</ Ul>
</ Div>
- Mit JavaScript: JavaScript auf das Drop-Down - Menü aufrufen zu wechseln, verwenden Sie bitte die folgende Methode:
$ ( '. Dropdown-Toggle'). Dropdown ()
Beispiele
In der Navigationsleiste
Das folgende Beispiel demonstriert die Verwendung der Navigationsleiste Dropdown-Menü:
Beispiele
<Nav class = "navbar navbar-default" role = "Navigation">
<Div class = "Behälter-Flüssigkeit">
<Div class = "navbar-header">
<A class = "navbar-Marke" href = "#"> Tutorial </ a>
</ Div>
<Div>
<Ul class = "nav navbar-nav" >
<Li class = "aktiv"> <a href = "#"> iOS < / a> </ li>
<Li> <a href = "#"> SVN < / a> </ li>
<Li class = "Dropdown">
<A href = "#" class = "Drop - Down-Toggle" Daten-Toggle = "Dropdown"> Java <b class = "Caret"> </ b>
</ A>
<Ul class = "Drop - Down-Menü">
<Li> <a href = "#"> jmeter < / a> </ li>
<Li> <a href = "#"> EJB < / a> </ li>
<Li> <a href = "#"> Jasper Bericht </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> isoliert Link </ a> </ li>
<Li class = "Teiler"> </ li>
<Li> <a href = "#"> eine andere isolierte Link </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
Versuchen » Die Ergebnisse sind wie folgt:
In einem Register innerhalb
Das folgende Beispiel demonstriert die Verwendung der Registerkarte in der Drop-Down-Menü:
Beispiele
<P> -Tag mit einer Seite Pull-Down - Menü </ p>
<Ul class = "nav nav-Tabs" >
<Li class = "aktiv">
<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 class = "Dropdown">
<A class = "Drop - Down-Toggle" Daten-Toggle = "Dropdown" href = "#"> Java < Spanne class = "Caret"> </ span> </ a>
<Ul class = "Drop - Down-Menü">
<Li>
<A href = "#"> Schaukel < / a> </ li>
<Li>
<A href = "#"> jMeter < / a> </ li>
<Li>
<A href = "#"> EJB < / a> </ li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a> </ li>
</ Ul>
</ Li>
<Li>
<A href = "#"> PHP < / a> </ li>
</ Ul>
Versuchen » Die Ergebnisse sind wie folgt:
Optionen
Es gibt keine Optionen.
Weg
Drop-Down-Menü zu wechseln es eine einfache Möglichkeit ist das Drop-Down-Menü ein- oder ausblenden.
$ (). Dropdown ( "Toggle")
Beispiele
Das folgende Beispiel zeigt das Pull-Down-Menü (Dropdown) Plug-in-Methode:
Beispiele
<Nav class = "navbar navbar-default" role = "Navigation">
<Div class = "Behälter-Flüssigkeit">
<Div class = "navbar-header">
<A class = "navbar-Marke" href = "#"> W3Cschool < / a>
</ Div>
<Div id = "myExample">
<Ul class = "nav navbar-nav" >
<Li class = "aktiv">
<A href = "#"> iOS < / a>
</ Li>
<Li>
<A href = "#"> SVN < / a>
</ Li>
<Li class = "Dropdown">
<A href = "#" class = "Drop - Down-Toggle" Daten-Toggle = "Dropdown"> Java <b class = "Caret"> </ b>
</ A>
<Ul class = "Drop - Down-Menü">
<Li>
<A id = "action-1" href = "#"> jmeter < / a>
</ Li>
<Li>
<A href = "#"> EJB < / a>
</ Li>
<Li>
<A href = "#"> Jasper Bericht </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> isoliert Link </ a>
</ Li>
<Li class = "Teiler"> </ li>
<Li>
<A href = "#"> eine andere isolierte Link </ a>
</ Li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
</ Nav>
</ Div>
<Script> $ (function () {$ ( "Drop - Down-Schalter.") Dropdown ( "Toggle") ;.}); </ script>
Versuchen » Die Ergebnisse sind wie folgt: