单击关闭时保持Bootstrap Dropdown打开

Question

如果下拉列表可见,我在下拉列表外单击它将关闭.我需要它不要关闭.

从文档:

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

我可以添加哪些JavaScript来防止关闭下拉？

Answer 1

从Bootstrap dropdown文档的events部分:

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下拉列表中的a引发的,我们将允许收盘.

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

Answer 2

某些依赖项中的版本更改导致KyleMit,并且大多数其他解决方案不再起作用.我进一步挖了一下,由于某种原因,click()当Bootstrap尝试并失败时发送一个hide.bs.dropdown,然后再调用一次hide.bs.dropdown.我通过强制关闭click()按钮本身,而不是整个下拉菜单来解决这个问题.

Bootply现场演示

JavaScript的

$('.keep-open').on({
    "shown.bs.dropdown": function() { $(this).attr('closable', false); },
    //"click":             function() { }, // For some reason a click() is sent when Bootstrap tries and fails hide.bs.dropdown
    "hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }
});

$('.keep-open').children().first().on({
  "click": function() {
    $(this).parent().attr('closable', true );
  }
})

HTML

<h2>Click the dropdown button </h2>
<p>It will stay open unless clicked again to close </p>

<div class="dropdown keep-open">
    <!-- Dropdown Button -->
    <button id="dLabel" role="button" href="#" data-toggle="dropdown" data-target="#" class="btn btn-primary">
        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>