Twitter Bootstrap:关闭下拉列表时调用js函数

Question

当关闭或切换引导下拉列表时,是否存在可以绑定的事件？

Answer 1

来自twitter bootstrap官方网页:

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

hide.bs.dropdown是这里描述的4个事件之一.

更新(16年4月13日)

这些事件也同样适用Bootstrap 4.Bootstrap 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的数据api来存储下拉列表的状态,并将click事件添加到按钮和文档中.

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

没有一个记录的事件,但你可以使用.open类.dropdown和jQuery的click()事件:

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

要切换,请仅使用该click()事件.

这是jsfiddle.