JS Dropdown (dropdown.js)
Un menú desplegable es un menú conmutable que permite al usuario elegir un valor de una lista predefinida.
Para ver un tutorial sobre Dropdowns, lea nuestra Bootstrap Tutorial Menús desplegables .
Las clases desplegable Plugin
| Clase | Descripción | Ejemplo |
|---|---|---|
| .dropdown | Indica un menú desplegable | Intentalo |
| .dropdown-menu | Construye el menú desplegable | Intentalo |
| .dropdown-menu-right | Haga alinea un menú desplegable | Intentalo |
| .dropdown-header | Añade una cabecera en el interior del menú desplegable | Intentalo |
| .dropup | Indica un menú dropup | Intentalo |
| .disabled | Desactiva un elemento en el menú desplegable | Intentalo |
| .divider | Separa los elementos dentro del menú desplegable con una línea horizontal | Intentalo |
Via data-* Atributos
Añadir data-toggle="dropdown" a un enlace o un botón para cambiar un menú desplegable.
Ejemplo
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">Dropdown Example</a>
Inténtalo tú mismo " a través de JavaScript
Habilitar manualmente con:
Nota: La data-toggle="dropdown" se requiere atributo independientemente de si se llama a la dropdown() método.
Opciones desplegables
| None |
Métodos desplegables
En la siguiente tabla se enumeran los métodos desplegables todos disponibles.
| Método | Descripción | Intentalo |
|---|---|---|
| .dropdown("toggle") | Cambia el menú desplegable | Intentalo |
Eventos desplegables
En la siguiente tabla se enumeran los eventos desplegables todos disponibles.
| Evento | Descripción | Intentalo |
|---|---|---|
| show.bs.dropdown | Se produce cuando el menú desplegable está a punto de ser mostrado. | Intentalo |
| shown.bs.dropdown | Se produce cuando el menú desplegable se muestra totalmente (después de las transiciones CSS han completado) | Intentalo |
| hide.bs.dropdown | Se produce cuando el menú desplegable está a punto de ser ocultado | Intentalo |
| hidden.bs.dropdown | Se produce cuando el menú desplegable está totalmente oculta (después de las transiciones CSS han completado) | Intentalo |
Consejo: Utilice jQuery event.relatedTarget para obtener el elemento que desencadenó el menú desplegable:
Ejemplo
$(".dropdown").on("show.bs.dropdown", function(event){
var x = $(event.relatedTarget).text(); // Get the text of the element
alert(x);
}); Inténtalo tú mismo " 
Ejemplos
Cambiar el icono de símbolo de intercalación al revés
El ejemplo siguiente cambia el icono de símbolo de intercalación de apuntar hacia abajo para arriba al hacer clic en el menú desplegable:
Ejemplo
/* 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> Inténtalo tú mismo " Con barra de navegación desplegable
El siguiente ejemplo añade un menú desplegable para un botón en la barra de navegación:
Ejemplo
<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> Inténtalo tú mismo " El siguiente ejemplo añade un menú desplegable con un formulario de acceso en la barra de navegación:
Ejemplo
<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> Inténtalo tú mismo " Menús desplegables Multi-Level
En este ejemplo, usamos jQuery para abrir menús desplegables multi-nivel de clic:
Ejemplo
<script>
$(document).ready(function(){
$('.dropdown-submenu a.test').on("click",
function(e){
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
});
</script> Inténtalo tú mismo " En este ejemplo, hemos creado una costumbre .dropdown-submenu clase de menús desplegables de varios niveles:
Ejemplo
/* 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> Inténtalo tú mismo "