web-dev-qa-db-fra.com

Comment masquer la liste déroulante Twitter Bootstrap

Cela devient agaçant - lorsque je clique sur un élément dans une liste déroulante Bootstrap, la liste déroulante ne ferme pas. Je l'ai configuré pour ouvrir une boîte à lumière Facebox lorsque vous cliquez sur l'élément de liste déroulante, mais il y a un problème. 

enter image description here

Ce que j'ai essayé

Lorsque l'on clique 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 rouvrira pas.

Comme vous pouvez le constater, il faut vraiment que le menu déroulant se ferme, car il a l'air minable lorsqu'il reste ouvert (principalement parce que le z-index du menu déroulant est plus élevé que la superposition de la boîte modale Facebox.

Pourquoi je n'utilise pas la boîte modale intégrée à 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 ne permet pas 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 est très joli) mais dans les navigateurs non-CSS3, cela ne fait que montrer, ce qui n’a pas l’air beau; Facebox utilise JavaScript pour se fondre en fondu afin qu'il fonctionne dans tous les navigateurs.
jquerytwitter-bootstrap
83
Nathan

Essaye ça:

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

Cela peut aussi fonctionner pour vous:

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

essayé la plupart des options à partir d'ici, mais aucune d'entre elles ne fonctionna vraiment pour moi. ($('.dropdown.open').removeClass('open'); l'a caché, mais si vous avez déplacé la souris avant de cliquer sur quoi que ce soit d'autre, cela s'affichera de nouveau. 

donc je finis de le faire avec un $("body").trigger("click")

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

Bootstrap 4 (octobre 2018):

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

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

7
Gurinder

C'est ce qui a fonctionné pour moi:

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

Cela peut être fait sans écrire de code JavaScript en ajoutant attribut data-toggle = "dropdown" dans la balise anchor 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>

5
Shivaji Mutkule

La réponse choisie ne fonctionnait pas 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.

4
scolja

Essaye ça!

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

OR

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

Ça marche toujours pour moi.

3
bbc_danang

Pourquoi utiliser ma méthode, parce que si l'utilisateur sort du div, cette méthode lui laisse un certain délai avant la disparition des sous-menus. C'est comme utiliser le plugin Superfish.

1) Premier téléchargement hover intention 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);

    });
3
Sylvain
$('.dropdown.open').removeClass('open');
2
Jared Christensen

Essayez d'ouvrir 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 ça:

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

En lisant la documentation et en utilisant JavaScript, cela pourrait être fait en utilisant la méthode toggle:

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

Vous pouvez lire à ce sujet dans: http://getbootstrap.com/javascript/#dropdowns-methods

2
Alfchee

Voici ma solution sur la façon de fermer le menu déroulant et de le faire basculer:

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

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

1
Igor Aloise Lod

Utilisez class = "dropdown-toggle" sur la balise d'ancrage. Lorsque vous cliquerez sur la balise d'ancrage, elle fermera la liste déroulante de bootstrap.

0
Zeeshan Jan

Le moyen le plus simple:

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

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

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

cela a fonctionné pour moi, j'avais un navbar et plusieurs menus déroulants.

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

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

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

dans mon scénario, j'ai utilisé quand appel ajax 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;
});
0
Qaisar irfan

Bootstrap 4.1:

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

Après avoir cliqué:

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

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 voulez masquer la liste déroulante, vous appelez:

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

Hey, cette astuce simple jQuery devrait aider.

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