web-dev-qa-db-fra.com

Bootstrap fermeture du menu déroulant lorsque vous cliquez dessus)

J'ai mis un formulaire dans un menu déroulant bootstrap), 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ù mettre pour éviter que la liste déroulante ne disparaisse.

$(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.

javascripthtml5drop-down-menutwitter-bootstrap
76
Sorin Cioban

Utilisez simplement cet exemple. Cette solution fonctionne pour moi.

<script type="text/javascript">
window.addEvent('domready',function() {    
   Element.prototype.hide = function() {
      $(function () { 
        // replace your tab id with myTab
        //<ul id="myTab" class="nav nav-tabs">
        $('#myTab li:eq(1) a').tab('show');
      });      
   };
});
</script>

J'espère que ça va aider. Merci.

4
Shiplu

Vous pouvez omettre l’appel déroulant, le menu déroulant bootstrap fonctionne sans lui. Assurez-vous d’emballer correctement 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 sur le corps de votre page.

JS 

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

Si vous voulez arrêter de fermer seulement une partie du menu déroulant, pas tous, ajoutez simplement une classe supplémentaire à votre bloc ul:

<ul class="dropdown-menu keep-open-on-click">

Et utilisez ce code:

$(document).on('click', '.dropdown-menu', function(e) {
    if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});
10
oleg

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:

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

Vous devez empêcher l’événement de remonter dans l’arborescence DOM:

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

event.stopPropagation empêche l'événement d'atteindre le nœud où il est finalement géré par Bootstrap).

8
Vishnu T Asok

Ceci fonctionne pour my (sidebar latéral ouvrant un lien simple avec bootstrap toggle)

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

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();
});
4
usugarbage

Si vous regardez au bas des sources du widget déroulant, vous verrez ceci:

$(document)
  .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
    e.stopPropagation()
  })

Donc, vous avez les choix suivants:

  1. Emballez simplement votre menu déroulant avec formulaire
  2. Ou vous pouvez ajouter un écouteur d'événement pour l'événement click de . Dropdown YOUR_SELECTOR 
$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })
4
Timofey Novitskiy

Mettre

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

sur la réponse d'origine, supprimez toutes les classes et mettez simplement la classe ".dropdown-menu", cela a fonctionné pour moi. J'ai un champ de saisie dans le menu déroulant.

Screenshot of menu

4
River CR Phoenix