From the events section of the Bootstrap dropdown
documentation:
hide.bs.dropdown
: This event is fired immediately when the hide instance method has been called.
For starters, to prevent the dropdown from closing, we can just listen to this event and stop it from proceeding by returning false
:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
For a complete solution, you probably want to allow it to close when the dropdown itself is clicked. So only some of the time we’ll want to prevent the box from closing.
To do this we’ll set .data()
flags in two more events raised by the dropdown:
shown.bs.dropdown
– When shown, we’ll set.data('closable')
tofalse
click
– When clicked, we’ll set.data('closable')
totrue
Thus, if the hide.bs.dropdown
event was raised by a click
on the dropdown, we’ll allow a close.
Live Demo in jsFiddle
JavaScript
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
HTML (note I’ve added the class keep-open
to the dropdown)
<div class="dropdown keep-open">
<!-- Dropdown Button -->
<button id="dLabel" role="button" href="#" class="btn btn-primary"
data-toggle="dropdown" data-target="#" >
Dropdown <span class="caret"></span>
</button>
<!-- Dropdown Menu -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>