单击时保持Bootstrap下拉菜单处于打开状态

Question

如果下拉菜单可见，并且我在下拉菜单外部单击，它将关闭。我需要它不关闭。

从文档中：

打开后，该插件还会添加 .dropdown-backdrop 作为单击区域，以在菜单外单击时关闭下拉菜单。

我可以添加什么JavaScript以防止下拉列表关闭？

Answer 1

从_Bootstrap_dropdown文档的事件部分：

hide.bs.dropdown ：调用hide实例方法后，立即触发此事件。

对于初学者来说，为了防止下拉菜单关闭，我们可以通过返回false以下内容来监听此事件并阻止其继续：

$('#myDropdown').on('hide.bs.dropdown', function () {
    return false;
});

对于完整的解决方案，您可能希望单击下拉列表时将其关闭。因此，仅在 某些情况下， 我们希望阻止该框关闭。

为此，我们将.data()在下拉菜单引发的另外两个事件中设置标志：

• shown.bs.dropdown -显示时，我们将设置.data('closable')为 false
• click -点击后，我们将设置.data('closable')为 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":  functhtml" target="_blank">ion() { return this.closable; }
});

HTML （注意，我已经将该类添加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>