twitter-bootstrap – 点击关闭时保持引导下拉框打开

发布时间：2020-12-18 00:08:24 所属栏目：安全来源：网络整理

导读：如果下拉列表可见，并且我在下拉列表外单击它关闭。我需要它不关闭。从文档： When opened,the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside the menu. 我可以添加什么JavaScript以防止关闭下拉

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

从文档：

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

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

解决方法

从 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’)设置为false
> click – 当点击时，我们将.data(‘closable’)设置为true

因此，如果通过点击下拉列表引发了hide.bs.dropdown事件，我们将允许关闭。

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(请注意，我已将类保持打开添加到下拉列表中)

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!