Comment masquer le menu déroulant de Twitter Bootstrap

Question

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

---

Ce que j'ai essayé

Lorsque l'élément est cliqué, j'ai essayé de faire ceci :

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

Ça le cache, mais ensuite, pour une raison quelconque, il ne s'ouvre plus.

Comme vous pouvez le voir, j'ai vraiment besoin que la liste déroulante se ferme, parce qu'elle a l'air merdique lorsqu'elle reste ouverte (principalement parce que l'image de la liste déroulante n'est pas visible). z-index de la liste déroulante est plus élevé que le recouvrement 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é à Bootstrap c'est parce que :

1. Il n'y a pas de moyen de charger du contenu avec AJAX.
2. Vous devez taper du HTML à chaque fois pour la modale ; 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 s'animer (ce qui est très joli), mais dans les navigateurs non CSS3, il se contente de s'afficher, ce qui n'est pas très joli. Facebox utilise JavaScript pour s'afficher en fondu et fonctionne donc dans tous les navigateurs.

Answer 1

Essayez ça :

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

Cela peut aussi fonctionner pour vous :

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

Answer 2

J'ai essayé la plupart des options proposées ici mais aucune d'entre elles n'a vraiment fonctionné pour moi. (le $('.dropdown.open').removeClass('open'); le cachait, mais si vous passiez la souris dessus avant de cliquer sur autre chose, il réapparaissait.

alors j'ai fini par le faire avec un $("body").trigger("click")

Answer 3

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

Bootstrap 4 (octobre 2018) :

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

Answer 4

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

Answer 5

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 ça aidera quelqu'un d'autre à l'avenir.