Twitter Bootstrap: Appelez une fonction js lorsqu’un menu déroulant est fermé

Y a-t-il un événement dans lequel je peux me lier et qui est déclenché lorsqu’une liste déroulante bootstrap est fermée ou basculée?

De la page officielle de twitter bootstrap :

$('#myDropdown').on('hide.bs.dropdown', function () { // do something… }); 

hide.bs.dropdown est l’ un des 4 événements décrits ici .

Mise à jour (13-avr.-16)

Ces événements fonctionnent également dans Bootstrap 4 . Documentation Bootstrap v4 .

Voici comment Bootstrap v2.3.2 ferme le menu, quel que soit votre clic sur:

 $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') }); 

Si vous utilisez v2.x, cela pourrait être utilisé pour savoir quand un menu sera fermé. Cependant, gardez à l’esprit que cela se déclenche à chaque clic. Si vous avez seulement besoin d’exécuter quelque chose lorsqu’un menu est vraiment fermé (ce qui est probablement tout le temps), vous devrez suivre lors de son ouverture. La réponse acceptée est probablement une meilleure solution à cet égard.

Dans Boostrap v3.0.0, le menu déroulant prend en charge quatre événements distincts:

show.bs.dropdown : cet événement se déclenche immédiatement lorsque la méthode d’instance show est appelée.

shown.bs.dropdown Cet événement est déclenché lorsque l’utilisateur a rendu visible la liste déroulante (attendra la fin des transitions CSS).

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 (attend que les transitions CSS se terminent).

De la documentation de Bootstrap .

Au bout du compte, la seule méthode fiable que j’ai trouvée consistait à utiliser l’API de données de jquery pour stocker l’état de la liste déroulante et à append des événements de clic au bouton et au document.

 $(document).ready(function() { $('#dropdown').data('open', false); $('#dropdown-button').click(function() { if($('#dropdown').data('open')) { $('#dropdown').data('open', false); update_something(); } else $('#dropdown').data('open', true); }); $(document).click(function() { if($('#dropdown').data('open')) { $('#dropdown').data('open', false); update_something(); } }); }); 

Il n’y a pas d’événement documenté, mais vous pouvez utiliser la classe .open de l’ .dropdown et de l’ .dropdown jQuery click() :

 $('#the-dropdown').click(function () { if($(this).hasClass('open')) { alert('it works'); } }); 

Pour basculer, utilisez simplement l’événement click() .

Voici le jsfiddle.

Nolan, je suppose que ce que vous entendez par “Ceci n’a pas fonctionné” est: lorsque l’utilisateur clique n’importe où ailleurs sur la page et ne ferme pas correctement le bouton / liste déroulante. Vous pouvez surveiller ces clics (n’importe où sur le document) en:

 $(document).click(function() { //check which element was clicked on }); 

J’ai fait le mien comme indiqué ci-dessous.

HTML:

  

Scénario

 $('#theme li').click(function () { switch_style($(this).text()); }); 

Fonctionne très bien