twitter-bootstrap
Bootstrap Dropdowns
Buscar..
Parámetros
Métodos | Ejemplo |
---|---|
Llamar a través de Javascript | $('.dropdown-toggle').dropdown(); |
Alterna el menú desplegable | $('.dropdown-toggle').dropdown('toggle') |
Tipo de evento | Descripción |
show.bs.dropdown | Este evento se dispara inmediatamente cuando se llama al método de instancia de show. |
shown.bs.downdown | Este evento se activa cuando el menú desplegable se ha hecho visible para el usuario (esperará a que se completen las transiciones de CSS). |
hide.bs.dropdown | Este evento se activa inmediatamente cuando se llama al método de instancia de ocultación. |
hidden.bs.dropdown | Este evento se activa cuando el menú desplegable ha terminado de ocultarse al usuario (esperará a que se completen las transiciones de CSS). |
Ejemplo de controlador de eventos | $(element).on('show.bs.dropdown', function () { // do something… }) |
Observaciones
Cuando se llama a Dropdown Via Javascript $('.dropdown-toggle').dropdown()
, el data-api es decir, data-toggle="dropdown"
aún es necesario. Lee mas
Cómo utilizar
Utilice la clase .dropdown
en el elemento principal del menú desplegable.
Agregue la clase .dropdown-menu a un elemento para inicializar el complemento del menú desplegable.
Llame al complemento utilizando la clase .dropdown-toggle
y el atributo data-toggle="dropdown"
en un botón o un hipervínculo.
Ejemplo básico
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Option One</a></li>
<li><a href="#">Option two</a></li>
<li><a href="#">More Options</a></li>
</ul>
</div>
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow