javascript - Twitter Bootstrap：关闭下拉菜单时调用 js 函数

Question

当引导下拉菜单关闭或切换时，我可以绑定一个事件吗？

Answer 1

来自twitter bootstrap 官方页面：

$('#myDropdown').on('hide.bs.dropdown', function () {
  // do something…
});

hide.bs.dropdown是此处描述的 4 个事件之一。

更新（2016 年 4 月 13 日）

这些事件在Bootstrap 4. 引导 v4 文档。

Answer 2

无论您点击什么，这就是 Bootstrap v2.3.2 关闭菜单的方式：

$('html').on('click.dropdown.data-api', function () {
    $el.parent().removeClass('open')
});

如果您使用的是 v2.x，这可用于了解菜单何时关闭。但是，请记住，这会在每次点击时触发。如果您只需要在菜单真正关闭时执行某些操作（可能一直如此），那么您首先需要跟踪菜单何时打开。在这方面，公认的答案可能是更好的解决方案。

然而，在 Boostrap v3.0.0 中，下拉菜单支持四个单独的事件：

show.bs.dropdown：调用 show 实例方法时立即触发此事件。

shown.bs.dropdown当下拉菜单对用户可见时触发此事件（将等待 CSS 转换完成）​​。

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

hidden.bs.dropdown当下拉菜单完成对用户隐藏时触发此事件（将等待 CSS 转换完成）​​。

来自Bootstrap 的文档。

Answer 3

最后，我找到的唯一可靠的方法是使用jquery的data api来存储下拉列表的状态，并为按钮和文档添加点击事件。

$(document).ready(function() {

    $('#dropdown').data('open', false);

    $('#dropdown-button').click(function() {
        if($('#dropdown').data('open')) {
            $('#dropdown').data('open', false);
            update_something();
        } else
            $('#dropdown').data('open', true);
    });

    $(document).click(function() {
        if($('#dropdown').data('open')) {
            $('#dropdown').data('open', false);
            update_something();
        }
    });

});

Answer 4

没有记录的事件，但您可以使用jQuery事件的.open类：.dropdownclick()

$('#the-dropdown').click(function () {
    if($(this).hasClass('open')) {
        alert('it works');
    }
});

对于切换，仅使用click()事件。

这是jsfiddle。

Answer 5

诺兰，我假设您所说的“这不起作用”是指：当用户单击页面上的其他任何地方并且没有正确关闭按钮/下拉菜单时。您可以通过以下方式监控这些点击（文档上的任何位置）：

$(document).click(function() {
    //check which element was clicked on
});

Answer 6

我做了我的，如下所示。

HTML：

<ul class="nav navbar-nav navbar-right">
                    <li id="theme_selector" class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Theme <b class="caret"></b></a>
                        <ul id="theme" class="dropdown-menu" role="menu">
                            <li><a href="#">Amelia</a></li>
                            <li><a href="#">Cerulean</a></li>
                            <li><a href="#">Cyborg</a></li>
                            <li><a href="#">Cosmo</a></li>
                            <li><a href="#">Darkly</a></li>
                            <li><a href="#">Flatly</a></li>
                            <li><a href="#">Lumen</a></li>
                            <li><a href="#">Simplex</a></li>
                            <li><a href="#">Slate</a></li>
                            <li><a href="#">Spacelab</a></li>
                            <li><a href="#">Superhero</a></li>
                            <li><a href="#">United</a></li>
                            <li><a href="#">Yeti</a></li>
                        </ul>
                    </li>
                </ul>

脚本

$('#theme li').click(function () {
   switch_style($(this).text());
        });

效果很好