Liste déroulante Bootstrap fermant lorsque vous cliquez dessus

Question

Je mets un formulaire dans un menu déroulant d'amorçage, mais lorsque je clique sur l'un des champs du formulaire, le menu déroulant disparaît. J'ai ce morceau de code mais je ne sais pas où le mettre pour empêcher la liste déroulante de disparaître.

 $(function test() {
  // Setup drop down menu
  $('.dropdown-toggle').dropdown();

  // Fix input element click problem
  $('.dropdown input, .dropdown label').click(function(e) {
    e.stopPropagation();
  });
});
 

Quelqu'un pourrait-il me dire où je devrais mettre ceci? J'ai essayé dans le bootstrap-dropdown, j'ai essayé dans le code HTML, mais cela ne fonctionne toujours pas.

Answer 1

Vous pouvez tout à fait ignorer l'appel du menu déroulant, le menu déroulant du bootstrap fonctionne sans lui. Assurez-vous de bien emballer votre script, vous pouvez l'inclure dans l'en-tête ou le corps de votre page, bien que personnellement je préfère le placer dans le corps de votre page.

JS

 <script type="text/javascript">
    $('.dropdown-menu input, .dropdown-menu label').click(function(e) {
        e.stopPropagation();
    });
</script>
 

Answer 2

Le temps a passé depuis que la réponse a été acceptée, mais si vous voulez garder le menu déroulant ouvert, s'il agit comme une sorte de dialogue, la meilleure façon, à mon avis, est de:

 $('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
            if ($.contains(dropdown, e.target)) {
                e.preventDefault();
            //or return false;
            }
        });
 

Answer 3

Cela fonctionne pour mon (barre latérale latérale ouvrant un lien simple avec une bascule bootstrap)

 $('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
    e.stopImmediatePropagation();
});
 

Answer 4

Merci pour la réponse ci-dessus, j'avais le même problème avec les sous-menus dans les menus déroulants. En utilisant la solution ci-dessus, j'ai également pu résoudre le problème.

 $('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{                   
    e.stopPropagation();
});