Comment masquer la liste déroulante Twitter Bootstrap

Cela devient ennuyeux - lorsque je clique sur un élément dans une liste déroulante Bootstrap, la liste déroulante ne se ferme pas. Je l'ai configuré pour ouvrir une lightbox Facebox lorsque vous cliquez sur l'élément de liste déroulante, mais il y a un problème avec celui-ci.

Ce que j'ai essayé

Lorsque vous cliquez sur l'élément, j'ai essayé de faire ceci:

    $('.dropdown.open').removeClass('open');
    $('.dropdown-menu').hide();

Cela le cache, mais pour une raison quelconque, il ne s'ouvrira plus.

Comme vous pouvez le voir, j'ai vraiment besoin de la liste déroulante pour se fermer, car elle a l'air merdique quand elle reste ouverte (principalement parce que z-indexla liste déroulante est plus élevée que la superposition de la boîte modale Facebox.

Pourquoi je n'utilise pas la boîte modale intégrée de Bootstrap

Si vous vous demandez pourquoi je n'utilise pas la jolie boîte modale intégrée à Bootstrap , c'est parce que:

1. Il n'a pas de moyen de charger du contenu avec AJAX.
2. Vous devez taper HTML à chaque fois pour le modal; avec Facebox, vous pouvez faire un simple:$.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'});
3. Il utilise des animations CSS3 pour animer (ce qui a l'air très agréable) mais dans les navigateurs non-CSS3, cela montre juste, ce qui n'a pas l'air si beau; Facebox utilise JavaScript pour se fondre afin qu'il fonctionne dans tous les navigateurs.

Essaye ça:

$('.dropdown.open .dropdown-toggle').dropdown('toggle');

Cela peut également fonctionner pour vous:

$('[data-toggle="dropdown"]').parent().removeClass('open');

essayé la plupart des options d'ici, mais aucune d'elles n'a vraiment fonctionné pour moi. ( $('.dropdown.open').removeClass('open');Ils l' ont caché, mais si vous passez la souris avant de cliquer sur quoi que ce soit d'autre, il réapparaît.

alors je finis par le faire avec un $("body").trigger("click")

$('.open').removeClass('open');

Bootstrap 4 (octobre 2018):

$('.show').removeClass('show');

Cela peut être fait sans écrire de code JavaScript en ajoutant l'attribut data-toggle = "dropdown" dans la balise d'ancrage comme indiqué ci-dessous:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#" data-toggle="dropdown">Another action</a></li>
  </ul>
</div>

Il vous suffit de $('.dropdown.open').removeClass('open');supprimer la deuxième ligne qui masque le menu déroulant.

C'est ce qui a fonctionné pour moi:

$(this).closest(".dropdown").find(".dropdown-toggle").dropdown("toggle");

La réponse sélectionnée n'a pas fonctionné pour moi, mais je pense que c'est à cause de la nouvelle version de Bootstrap. J'ai fini par écrire ceci:

$('.btn-navbar').addClass('collapsed');
$('.nav-collapse').removeClass('in').css('height', '0');

J'espère que cela sera utile à quelqu'un d'autre à l'avenir.

Essaye ça!

.removeClass("open").trigger("hide.bs.dropdown").trigger("hidden.bs.dropdown");

OU

$(clicked_element).trigger("click");

Cela fonctionne toujours pour moi.

Pourquoi utiliser ma méthode, car si l'utilisateur sort du div, ce metod permet à l'utilisateur un certain délai avant que les sous-menus ne disparaissent. C'est comme utiliser le plugin superfish.

1) Premier téléchargement de l'intention de survol javascript

Lien ici: hover intent javascript

2) Voici mon code à exécuter

$(document).ready(function(){

        var config = {    
            over: showBootrapSubmenu,   
            timeout: 500,
            out: hideBootrapSubmenu  
        };

        function showBootrapSubmenu(){  
             $(this).addClass('open');
        }
        function hideBootrapSubmenu(){  
          $(this).removeClass('open');
            }

        //Hover intent for Submenus
        $(".dropdown").hoverIntent(config);

    });

$('.dropdown.open').removeClass('open');

La lecture de la documentation et l'utilisation de JavaScript peuvent être effectuées en utilisant la méthode toggle:

$('.button-class').on('click',function(e) {
    e.preventDefault();
    $('.dropdown-class').dropdown('toggle');
}

Vous pouvez en savoir plus sur: http://getbootstrap.com/javascript/#dropdowns-methods

Essayez d'ouvrir le HTML avec Bootstrap Modal, j'utilise ce code:

$(function() {
     $('a[data-toggle=modal]').click(function(e) {
          e.preventDefault();
          var page = $(e.target).attr('href');
          var url = page.replace('#','');
          $(page).on('show', function () {
              $.ajax({
              url: "/path_to/"+url+".php/html/...",
              cache: false,
              success: function(obj){
                   $(page).css('z-index', '1999');
                   $(page).html(obj);
              }
              });
         })
     });
}); 

et le lien est comme ceci:

<a href="#my_page" data-toggle="modal">PAGE</a>

Voici ma solution pour fermer la liste déroulante du bouton et basculer le bouton:

$(".btn-group.open", this)
    .trigger("click")
    .children("a.dropdown-toggle")
    .trigger("blur")

Où "ceci" est un conteneur global du groupe de boutons.

Bootstrap 4.1:

$(".dropdown-link").closest(".dropdown-menu").removeClass('show');

cela a fonctionné pour moi, j'avais une barre de navigation et plusieurs menus déroulants.

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

La façon la plus simple de procéder est la suivante: vous ajoutez une étiquette de masquage:

<label class="hide_dropdown" display='hide'></label>

puis chaque fois que vous souhaitez masquer la liste déroulante, vous appelez:

$(".hide_dropdown").trigger('click');

Je ne sais pas si cela aidera quelqu'un (peut-être que c'est trop spécifique à mon cas, et pas à cette question) mais pour moi, cela a fonctionné:

$('.input-group.open').removeClass('open');

Après clic:

// Hide mobile menu
$('.in,.open').removeClass('in open');
// Hide dropdown
$('.dropdown-menu').css('display','none');
setTimeout(function(){
    $('.dropdown-menu').css('display','');
},100);

Utilisez class = "dropdown-toggle" sur la balise d'ancrage, puis lorsque vous cliquez sur la balise d'ancrage, cela fermera la liste déroulante de bootstrap.

Hé, cette simple astuce jQuery devrait vous aider.

$(".dropdown li a").click(function(){
$(".dropdown").removeClass("open");
});

La manière la plus simple:

  $('.navbar-collapse a').click(function(){
    $('.navbar-toggle').trigger('click')
  })

vous pouvez utiliser ce code dans votre gestionnaire d'événements actuel

$('.in,.open').removeClass('in open');

dans mon scénario, j'ai utilisé lorsque l'appel ajax est terminé

jQuery(document).on('click', ".woocommerce-mini-cart__buttons .wc-forward.checkout", function() {
    var _this = jQuery(this);
    ajax_call(_this.attr("data-ajax-href"), "checkout-detail");
    $('.in,.open').removeClass('in open');
    return false;
});

La sélection par attribut est la manière la plus lente. Voici la solution la plus rapide pour masquer la liste déroulante ouverte:

$(".dropdown-menu.show").parent().dropdown("toggle");

ou utilisez ce qui suit, si le .dropdown-menu n'est pas l'élément enfants suivant (recherchez le contrôle déroulant parent le plus proche):

$(".dropdown-menu.show").closest(".dropdown").dropdown("toggle");

Elle a peut-être été ajoutée rétrospectivement (bien que cette fonctionnalité ne soit pas documentée , même dans Bootstrap 4.3.1), mais vous pouvez simplement l'appeler avec un hideparamètre. Assurez-vous simplement de l'appeler sur l'élément toggler. Ainsi:

$('.dropdown-toggle').dropdown('hide');
// or
$('[data-toggle="dropdown"]').dropdown('hide');

Bien sûr, cela fonctionne également en sens inverse avec show.