JS Dropdown (dropdown.js)
Ein Dropdown-Menü ist ein togglebar Menü, das dem Benutzer ermöglicht, ein Wert aus einer vordefinierten Liste zu wählen.
Ein Tutorial über Auswahlmenüs, unsere lesen Bootstrap Auswahlmenüs Tutorial .
Die Dropdown-Plugin Klassen
| Klasse | Beschreibung | Beispiel |
|---|---|---|
| .dropdown | Zeigt ein Dropdown-Menü | Versuch es |
| .dropdown-menu | Baut das Dropdown-Menü | Versuch es |
| .dropdown-menu-right | Rechts richtet ein Dropdown-Menü | Versuch es |
| .dropdown-header | Fügt einen Header in der Drop-Down-Menü | Versuch es |
| .dropup | Zeigt eine dropup Menü | Versuch es |
| .disabled | Deaktiviert ein Element in der Drop-Down-Menü | Versuch es |
| .divider | Trennt Elemente in der Drop-Down-Menü mit einer horizontalen Linie | Versuch es |
Via data-* Attribute
In data-toggle="dropdown" auf einen Link oder eine Schaltfläche , um ein Drop - Down - Menü zu wechseln.
Beispiel
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Versuch es selber " Via JavaScript
Aktivieren Sie manuell mit:
Hinweis: Die data-toggle="dropdown" - dropdown() data-toggle="dropdown" Attribut ist erforderlich, unabhängig davon , ob Sie den Anruf dropdown() Methode.
Dropdown-Optionen
| None |
Dropdown-Methoden
Die folgende Tabelle listet alle verfügbaren Drop-Down-Methoden.
| Methode | Beschreibung | Versuch es |
|---|---|---|
| .dropdown("toggle") | Blendet das Dropdown | Versuch es |
Dropdown Events
Die folgende Tabelle listet alle verfügbaren Drop-Down-Ereignisse.
| Event | Beschreibung | Versuch es |
|---|---|---|
| show.bs.dropdown | Tritt ein, wenn das Drop-Down über angezeigt werden soll. | Versuch es |
| shown.bs.dropdown | Tritt ein, wenn das Drop-Down vollständig angezeigt wird (nach dem CSS-Übergänge abgeschlossen haben) | Versuch es |
| hide.bs.dropdown | Tritt ein, wenn das Drop-Down über ausgeblendet wird | Versuch es |
| hidden.bs.dropdown | Tritt ein, wenn das Drop-Down vollständig verborgen ist (nachdem CSS-Übergänge abgeschlossen haben) | Versuch es |
Tipp: Verwenden Sie jQuery event.relatedTarget das Element zu erhalten , die das Drop - Down ausgelöst:
Beispiel
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); Versuch es selber " 
Beispiele
Ändern Sie das Caret-Symbol auf den Kopf
Im folgenden Beispiel wird das Einschaltungs Symbol nach unten zeigt auf nach oben, wenn Sie auf den Dropdown klicken:
Beispiel
/* CSS: */
<style>
.caret.caret-up {
border-top-width: 0;
border-bottom: 4px solid #fff;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$(".dropdown").on("hide.bs.dropdown", function(){
$(".btn").html('Dropdown
<span class="caret"></span>');
});
$(".dropdown").on("show.bs.dropdown",
function(){
$(".btn").html('Dropdown <span
class="caret caret-up"></span>');
});
});
</script> Versuch es selber " Navbar Mit Dropdown
Im folgenden Beispiel wird ein Dropdown-Menü für einen Button in der Navigationsleiste:
Beispiel
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav> Versuch es selber " Im folgenden Beispiel wird ein Dropdown-Menü mit einem Login-Formular in der Navigationsleiste:
Beispiel
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span
class="glyphicon glyphicon-log-in"></span></a>
<div
class="dropdown-menu">
<form
id="formlogin" class="form container-fluid">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div
class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button
type="button" id="btnLogin" class="btn btn-block">Login</button>
</form>
<div class="container-fluid">
<a class="small" href="#">Forgot password?</a>
</div>
</div>
</li>
</ul> Versuch es selber " Multi-Level-Auswahlmenüs
In diesem Beispiel verwenden wir jQuery Multi-Level-Dropdown-Listen auf Klick zu öffnen:
Beispiel
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Versuch es selber " In diesem Beispiel haben wir eine eigene erstellt .dropdown-submenu Klasse für Multi-Level - Dropdown - Listen:
Beispiel
/* CSS: */
<style>
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top:
-1px;
}
</style>
/* JS: */
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Versuch es selber "