单击关闭时保持 Bootstrap 下拉菜单打开 [英] Keep Bootstrap Dropdown Open When Clicked Off

问题描述

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

来自文档:

<块引用>

打开时，插件还会添加 .dropdown-backdrop 作为点击区域，用于在菜单外单击时关闭下拉菜单.

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

解决方案

来自 Bootstrap 的事件部分dropdown 文档:

<块引用>

hide.bs.dropdown:当调用 hide 实例方法时立即触发此事件.

对于初学者来说，为了防止下拉菜单关闭，我们可以只监听这个事件并通过返回false来阻止它继续:

$('#myDropdown').on('hide.bs.dropdown', function () {返回假；});

<小时>

对于完整的解决方案，您可能希望在单击下拉菜单时关闭它.所以只有某些时候我们会想要阻止框关闭.

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

• shown.bs.dropdown - 显示时，我们将 .data('closable') 设置为 false
• click - 点击时，我们将 .data('closable') 设置为 true

因此，如果 hide.bs.dropdown 事件是由下拉列表中的 click 引发的，我们将允许关闭.

jsFiddle 中的现场演示

JavaScript

$('.dropdown.keep-open').on({"shown.bs.dropdown": function() { this.closeable = false;},点击":函数(){ this.closeable = true;},"hide.bs.dropdown": function() { return this.closeable;}});

HTML (注意我已经在下拉菜单中添加了 keep-open 类)

<!-- 下拉按钮--><button id="dLabel";角色=按钮"href=#"class =btn btn-primary"数据切换=下拉"数据目标=#">下拉;<!-- 下拉菜单--><ul class="下拉菜单";角色=菜单"aria-labelledby="dLabel"><li><a href=#">动作</a></li><li><a href=#">另一个动作</a></li><li><a href=#">这里还有别的东西</a></li><li class="divider"></li><li><a href=#">分隔链接</a></li>

If the dropdown is visible, and I click outside the dropdown it closes. I need it to not close.

From the documentation:

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

What JavaScript can I add to prevent the drop down from closing?

解决方案

From the events section of the Bootstrap dropdown documentation:

hide.bs.dropdown: This event is fired immediately when the hide instance method has been called.

For starters, to prevent the dropdown from closing, we can just listen to this event and stop it from proceeding by returning false:

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

---

For a complete solution, you probably want to allow it to close when the dropdown itself is clicked. So only some of the time we'll want to prevent the box from closing.

To do this we'll set .data() flags in two more events raised by the dropdown:

• shown.bs.dropdown - When shown, we'll set .data('closable') to false
• click - When clicked, we'll set .data('closable') to true

Thus, if the hide.bs.dropdown event was raised by a click on the dropdown, we'll allow a close.

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 (note I've added the class keep-open to the dropdown)

<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>

这篇关于单击关闭时保持 Bootstrap 下拉菜单打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！