且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-11-16 17:30:10

引导 下拉菜单 文档:


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>