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

问题描述：

如果下拉菜单可见，我点击下拉菜单之外关闭。我需要它不关闭。

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

从文档中：

打开，插件还会在菜单之外点击时，将 .dropdown-背景添加为关闭下拉菜单的点击区域。

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

可以添加什么JavaScript以防止关闭？

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

答

从引导 下拉菜单 文档：

hide.bs.dropdown ：当隐藏实例方法已被调用。

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

对于初学者，为了防止下拉列表关闭，我们可以直接收听这个事件并停止继续执行 false ：

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.

为此，我们将设置 .data（） 标记在下拉列表中提出的另外两个事件中：

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

shown.bs.dropdown - 显示时，我们将将 .data（'closable'）设置为 false

点击 - 点击后，我们将 .data（'closable'）设置为 true

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

因此，如果 hide.bs.dropdown 事件是由点击在下拉列表中，我们将允许关闭。

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

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 （注意我添加了类code>保持打开到下拉列表）

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下拉菜单打开

相关推荐