web-dev-qa-db-fra.com

Twitter Bootstrap: appeler une fonction js lorsqu'une liste déroulante est fermée

Y a-t-il un événement auquel je peux être lié qui est déclenché quand une liste déroulante bootstrap est fermée ou basculée?

javascripttwitter-bootstrapdom-events
47
Nolan

En fin de compte, la seule méthode fiable que j'ai trouvée était d'utiliser l'api de données de jquery pour stocker l'état de la liste déroulante et ajouter 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();
        }
    });

});
22
Nolan

De Twitter bootstrap page officielle :

$('#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 de la même manière dans Bootstrap 4. Documentation Bootstrap v4 .

37
Rash

Voici comment Bootstrap v2.3.2 ferme le menu, peu importe sur quoi vous cliquez:

$('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 n'avez besoin d'exécuter quelque chose que lorsqu'un menu est vraiment fermé (ce qui est probablement tout le temps), vous aurez besoin de suivre quand un est ouvert en premier lieu. La réponse acceptée est probablement une meilleure solution à cet égard.

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

show.bs.dropdown : cet événement se déclenche immédiatement lors de l'appel de la méthode show instance.

shown.bs.dropdown Cet événement est déclenché lorsque la liste déroulante a été rendue visible à l'utilisateur (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é cachée à l'utilisateur (attendra la fin des transitions CSS).

De documentation de Bootstrap .

26
Mathachew

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

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

Pour basculer, utilisez uniquement l'événement click().

Ici est le jsfiddle.

7
albertedevigo

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

HTML:

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

Scénario

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

Fonctionne très bien

2
mark1234

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

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