BootStrap3 keep the dropdown menu open after click

问题:

I'm using bootstrap3.0, with it excellent drop-down menu.

If I click out side of the drop-down menu the menu will disappear, and this is quite right.

but when I click on the item of the drop-down menu, it will disappear as well. this is not that right I think, and there is no options can control it's toggle behavior. (I need the menu keep open when I click on the items, like the facebook notification menu)

so I think I have to modify the source of bootstrap, which I don't really want to. so before I touch the source, I want to know is there any good work-around? if not, How to change the source for minimum impact of bootstrap?

thanks for any idea.

回答1:

Here is one way to keep the dropdown open after click...

$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});

Demo: http://www.bootply.com/116350

Another option is to handle the click event like this..

$('#myDropdown .dropdown-menu').on({
    "click":function(e){
      e.stopPropagation();
    }
});

Demo: http://www.bootply.com/116581

回答2:

The accepted answer is very helpful. I want to provide another perspective - when a drop down menu should stay open when only certain items are clicked.

// A utility for keeping a Bootstrap drop down menu open after a link is
// clicked
//
// Usage:
//
//   <div class="dropdown">
//     <a href="" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
//       Dropdown trigger <span class="caret"></span>
//     </a>
//
//     <ul class="dropdown-menu" aria-labelledby="dLabel">
//       <li><a href="">Edit</a></li>
//       <li><a href="" keep-menu-open="true">Delete</a></li>
//     </ul>
//  </div>

$(".dropdown .dropdown-menu a").on("click", function(e) {
  var keepMenuOpen = $(this).data("keep-menu-open"),
      $dropdown = $(this).parents(".dropdown");

  $dropdown.data("keep-menu-open", keepMenuOpen);
});

$(".dropdown").on("hide.bs.dropdown", function(e) {
  var keepMenuOpen = $(this).data("keep-menu-open");

  $(this).removeData("keep-menu-open");

  return keepMenuOpen !== true;
});

回答3:

In vanilla JS

document.getElementById('myDropdown').addEventListener('click', function (event) {
    event.stopPropagation();
  });