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')
to false
click
- When clicked, we'll set .data('closable')
to true
Thus, if the hide.bs.dropdown
event was raised by a click
on the dropdown, we'll allow a close.
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>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…