Bootstrap Drop-Down-Menü (Dropdown) Widget

Zurück: Bootstrap modale Box (Modal) Widget

Next: Bootstrap Scroll - Monitor (Scrollspy) 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">
    ...
  </ 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.html">
    Pull-Down-Menü (Dropdown) <span class = "Caret"> </ span>
  </a>


  <Ul class = "Drop-Down-Menü" role = "Menü" aria-labelledby = "dlabel">
    ...
  </ 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: