Bootstrap dropdown closing when clicked

问题:

I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.

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

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

Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.

回答1:

Simply use this example.This solution works for me.

<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>

Hope it'll help. Thanks.

回答2:

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.

JS

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

回答3:

If you want to stop closing only some of dropdown menu, not all of them, then just add an additional class to your ul block:

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

And use this code:

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

回答4:

Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:

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

回答5:

You need to stop event from bubbling up the DOM tree:

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

event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

回答6:

This works for my (lateral sidebar opening a simple link with bootstrap toggle)

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

回答7:

If you look to the bottom of sources of dropdown widget, you will see this:

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

So you have the following choices:

1. Simply wrap yor dropdown with form
2. Or you can add event listener for click event of .dropdown YOUR_SELECTOR

$(document)
  .on('click.my', '.dropdown some_selector', function(e) {
    e.stopPropagation()
  })

回答8:

Thank you for the above answer, I was having the same issue w/ submenus under the dropdown menus. Using the above solution I was able to solve the problem for this as well.

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

回答9:

Put

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

on the original answer, remove all the classes, and just put the ".dropdown-menu" class, it worked for me. i have an input field inside the dropdown menu.