如果下拉列表可见,并且我在下拉列表外单击它关闭。我需要它不关闭。
从文档:
When opened,the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu.
解决方法
从
Bootstrap
dropdown
文档的事件部分:
hide.bs.dropdown
: This event is fired immediately when the hide instance method has been called.
对于初学者,为了防止下拉关闭,我们可以只监听这个事件,并通过返回false阻止它继续:
$('#myDropdown').on('hide.bs.dropdown',function () { return false; });
对于完整的解决方案,您可能希望在单击下拉列表时允许它关闭。所以只有一些时候,我们想要防止盒子关闭。
为此,我们将在下拉列表中引发的两个事件中设置.data()
个标记:
> shown.bs.dropdown – 显示时,我们将.data(‘closable’)设置为false
> click – 当点击时,我们将.data(‘closable’)设置为true
因此,如果通过点击下拉列表引发了hide.bs.dropdown事件,我们将允许关闭。
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(请注意,我已将类保持打开添加到下拉列表中)
<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>