Twitter Bootstrap - Arrêtez juste un menu déroulant pour fermer en un clic

Question

J'ai juste commencé à utiliser Twitter Bootstrap qui est incroyable! Mais j'ai essayé pendant plusieurs heures comment comprendre cela:

J'ai un bouton de la liste déroulante (un seul, pas tous d'entre eux), et à l'intérieur de ça, je veux avoir plusieurs champ de saisie où les gens peuvent taper des trucs à l'intérieur sans la liste déroulante cacher dès que vous cliquez sur elle (mais elle ne ferment si vous cliquez à l'extérieur de celui-ci).

J'ai créé un jsfiddle: http://jsfiddle.net/denislexic/8afrw/2/

Et voici le code, il est de base:

<div class="btn-group" style="margin-left:20px;">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
      <li>Email<input type="text" place-holder="Type here" /></li>
      <li>Password<input type="text" place-holder="Type here" /></li>
  </ul>
</div>​

Donc, fondamentalement, je veux pas fermer sur le clic de la liste déroulante (mais proches sur le clic du bouton d'action ou à l'extérieur de la liste déroulante). Ma meilleure supposition était jusqu'ici pour ajouter une classe à elle et essayer de faire un peu de JS, mais je ne pouvais pas le comprendre.

Merci pour toute aide.

Answer 1

Le problème est que le plugin jQuery boostdown dropdown ferme le menu déposé lorsque vous cliquez n'importe où ailleurs. Vous pouvez désactiver ce comportement en capturant les événements de clic sur votre élément de menu déroulant et en l'empêchant d'atteindre les écouteurs d'événements de clic sur l'élément body.

Il suffit d'ajouter

 $('.dropdown-menu').click(function(event){
     event.stopPropagation();
 });​
 

jsfiddle peut être trouvé ici

Answer 2

Je sais que cette question n’est pas destinée à Persular angular, mais si vous utilisez Angular, vous pouvez transmettre l’événement à partir du code HTML et arrêter la propagation via $ event:

 <div ng-click="preventClose($event)"></div>
 

Et dans le contrôleur:

 $scope.preventClose = function(event) { event.stopPropagation(); };
 

Answer 3

Après avoir essayé beaucoup de techniques, j'ai trouvé que c'était la meilleure à utiliser, cela ne causait aucun inconvénient, ce qui est même simple:

 $('body')
.on( 'click', '.dropdown-menu', function (e){
    e.stopPropagation();
});
 

Ce qui vous permet également de relier en direct des éléments internes dans des listes déroulantes.