javascript - 单击关闭时保持 Bootstrap 下拉菜单打开

Question

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

来自文档:

When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu.

我可以添加什么 JavaScript 来防止下拉菜单关闭？

Answer 1

来自 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') 设置为 假
• click - 单击时，我们会将 .data('closable') 设置为 true

因此，如果 hide.bs.dropdown 事件是由下拉菜单上的 click 引发的，我们将允许关闭。

Live Demo in jsFiddle

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 添加到下拉列表中)

<div class="dropdown <b>keep-open</b>">
    <!-- 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>