JS Dropdown (dropdown.js)
Un meniu vertical este un meniu toggleable, care permite utilizatorului să aleagă o valoare dintr-o listă predefinită.
Pentru un tutorial despre DROPDOWNS, citiți Bootstrap DROPDOWNS Tutorial .
Clasele Dropdown Plugin
| Clasă | Descriere | Exemplu |
|---|---|---|
| .dropdown | Indică un meniu drop-down | Incearca-l |
| .dropdown-menu | Construiește meniul drop-down | Incearca-l |
| .dropdown-menu-right | Dreapta aliniază un meniu drop-down | Incearca-l |
| .dropdown-header | Adaugă un antet în interiorul meniul drop-down | Incearca-l |
| .dropup | Indică un meniu dropup | Incearca-l |
| .disabled | Dezactiveaza un element din meniul drop-down | Incearca-l |
| .divider | Separă elemente din interiorul meniul vertical cu o linie orizontală | Incearca-l |
Via data-* Atribute
Adăugați data-toggle="dropdown" de data-toggle="dropdown" la un link sau un buton pentru a comuta un meniu drop - down.
Exemplu
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Încearcă - l singur » Via JavaScript
Activați manual cu:
Notă: data-toggle="dropdown" de dropdown() data-toggle="dropdown" - data-toggle="dropdown" atribut este necesar , indiferent dacă apelați dropdown() - dropdown() metoda.
Opțiuni derulante
| Nici unul |
Metode derulante
Tabelul următor listează metodele derulante toate disponibile.
| Metodă | Descriere | Incearca-l |
|---|---|---|
| . dropdown("toggle") | Activează sau dezactivează meniul drop-down | Incearca-l |
Evenimente derulante
Tabelul următor listează evenimente derulante toate disponibile.
| Eveniment | Descriere | Incearca-l |
|---|---|---|
| show.bs.dropdown | Apare atunci când verticală este pe cale de a fi afișate. | Incearca-l |
| shown.bs.dropdown | Apare atunci când verticală este afișată în totalitate (after CSS transitions have completed) | Incearca-l |
| hide.bs.dropdown | Apare atunci când verticală este pe cale de a fi ascuns | Incearca-l |
| hidden.bs.dropdown | Are loc atunci când meniul vertical este complet ascuns (after CSS transitions have completed) | Incearca-l |
Sfat: utilizați jQuery event.relatedTarget pentru a obține elementul care a declanșat meniul drop - down:
Exemplu
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); Încearcă - l singur » 
Exemple
Schimbarea pictograma caret cu susul în jos pentru a
Următorul exemplu schimbă pictograma caret de la îndreptat în jos spre în sus atunci când faceți clic pe meniul drop-down:
Exemplu
/* 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> Încearcă - l singur » Navbar Cu Dropdown
Următorul exemplu adaugă un meniu vertical pentru un buton din bara de navigare:
Exemplu
<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> Încearcă - l singur » Următorul exemplu adaugă un meniu vertical cu un formular de autentificare în bara de navigare:
Exemplu
<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> Încearcă - l singur » DROPDOWNS Multi-Level
În acest exemplu, vom folosi jQuery pentru a deschide dropdowns multi-nivel pe clic:
Exemplu
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Încearcă - l singur » În acest exemplu, am creat un obicei .dropdown-submenu clasa pentru dropdowns multi-nivel:
Exemplu
/* 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> Încearcă - l singur »