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