BootStrap3 keep the dropdown menu open after click on the item

Question

I'm using Bootstrap 3.0, with its excellent drop-down menu.

If I click outside of the drop-down menu the menu will disappear, and that is ok.

But when I click on a drop-down menu item, the menu disappears. I do not want this to happen, and there is no option to control the toggle behavior. I want the menu to remain open after clicking on one of the items, like the Facebook notification menu.

I think I have to modify the Bootstrap source, which I don't really want to do. So before I touch the source, I want to know is there any good workaround? If not, how should I change the source for minimum impact on Bootstrap?

Thank you for any ideas.

Possible duplicate of [Keep Bootstrap Dropdown Open When Clicked Off](http://stackoverflow.com/questions/19740121/keep-bootstrap-dropdown-open-when-clicked-off) — KyleMit, Apr 11 '16 at 14:20

Carol Skelly · Accepted Answer · 2014-02-25T12:58:41.023

56

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

edited Feb 25 '14 at 12:58

answered Feb 24 '14 at 14:57

Carol Skelly

351,302
90
710
624

Thanks so much, but when I tried, the menu will keep open even click out side the menu... and the demo link is broken – Hetfield Joe Feb 25 '14 at 08:51
What happens when you try the demo link? How is it broken? – Carol Skelly Feb 25 '14 at 11:16
oh, few hours ago, it said some error happened. now it's working. but the problem remain. – Hetfield Joe Feb 25 '14 at 12:07
Application Error An error occurred in the application and your page could not be served. Please try again in a few moments. If you are the application owner, check your logs for details. – Hetfield Joe Feb 25 '14 at 12:14
2

The second option works great for click events, anythoughts on touch? I've tried touchstart, and touch with out luck on either. – samanthasquared Jun 17 '14 at 19:50
The first option works, but on mobile now I have to click twice before the link is activated. The second option doesn't work on mobile, tried to use touch and touchstart in this option but without success. Any suggestions? – brasileric Aug 31 '16 at 08:31
1

This works and **keeps the drop down always open** in multilevel drop down, but **what if user wants to close the drop down** or you probably want to allow it to close when the dropdown itself is clicked ? Check [this](http://stackoverflow.com/questions/21694010/keep-bootstrap-3-dropdown-open-when-clicked) and [this](http://stackoverflow.com/questions/19740121/keep-bootstrap-dropdown-open-when-clicked-off), hope helps someone. – Shaiju T Sep 06 '16 at 10:49
for bootstrap 4, it helped me to change the jq class selector from .dropdown-menu to .dropdown-item ie: `#myDropdown .dropdown-item` – dalcam Apr 18 '18 at 21:58

score 6 · Answer 2 · answered Jan 24 '17 at 11:03

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;
});

score 5 · Answer 3 · answered Mar 03 '18 at 15:14

5

In vanilla JS

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

answered Mar 03 '18 at 15:14

sharkdawg

958
1
8
20

BootStrap3 keep the dropdown menu open after click on the item

3 Answers3

Linked

Related