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.

Answer 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