twitter-bootstrap
Bootstrap Dropdowns
Recherche…
Paramètres
Les méthodes | Exemple |
---|---|
Appelez via Javascript | $('.dropdown-toggle').dropdown(); |
Bascule la liste déroulante | $('.dropdown-toggle').dropdown('toggle') |
Type d'événement | La description |
show.bs.dropdown | Cet événement se déclenche immédiatement lorsque la méthode d'instance show est appelée. |
affiché.bs.dropdown | Cet événement est déclenché lorsque l'utilisateur a rendu visible la liste déroulante (attendra que les transitions CSS soient terminées). |
hide.bs.dropdown | Cet événement est déclenché immédiatement lorsque la méthode d'instance hide a été appelée. |
hidden.bs.dropdown | Cet événement est déclenché lorsque la liste déroulante a été masquée par l'utilisateur (attendra la fin des transitions CSS). |
Exemple de gestionnaire d'événement | $(element).on('show.bs.dropdown', function () { // do something… }) |
Remarques
Lorsque vous appelez Dropdown via Javascript $('.dropdown-toggle').dropdown()
Dropdown $('.dropdown-toggle').dropdown()
Dropdown $('.dropdown-toggle').dropdown()
, le data-api ie data-toggle="dropdown"
toujours requis. Lire la suite
Comment utiliser
Utilisez la classe .dropdown
sur l'élément parent du menu déroulant.
Ajoutez la classe .dropdown-menu à un élément pour initialiser le plug-in du menu déroulant.
Appelez le plug-in en utilisant la classe .dropdown-toggle
et l'attribut data-toggle="dropdown"
sur un bouton ou un lien hypertexte.
Exemple de base
<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
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow