从_Bootstrap_dropdown
文档的事件部分:
对于初学者来说,为了防止下拉菜单关闭,我们可以通过返回false
以下内容来监听此事件并阻止其继续:
$('#myDropdown').on('hide.bs.dropdown', function () {
return false;
});
对于完整的解决方案,您可能希望单击下拉列表时将其关闭。因此,仅在 某些情况下, 我们希望阻止该框关闭。
为此,我们将.data()
在下拉菜单引发的另外两个事件中设置标志:
因此,如果hide.bs.dropdown
事件是通过click
下拉菜单中的引发的,则我们将允许关闭。
$('.dropdown.keep-open').on({
"shown.bs.dropdown": function() { this.closable = false; },
"click": function() { this.closable = true; },
"hide.bs.dropdown": function() { return this.closable; }
});
(注意,我已经将该类添加keep-open
到了下拉列表中)
<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>