在Bootstrap 3中的导航栏元素外部单击时，如何关闭打开的折叠导航栏？

一尘不染

在Bootstrap 3中的导航栏元素外部单击时，如何关闭打开的折叠导航栏？

css

在导航栏元素外部单击时，如何关闭打开的折叠导航栏？当前，打开或关闭它的唯一方法是单击navbar-toggle按钮。

请参见示例和代码：

到目前为止，我已经尝试了以下似乎无效的方法：

jQuery(document).click(function() {

});

jQuery('.navbar').click(function(event) {
    jQuery(".navbar-collapse").collapse('hide');
    event.stopPropagation();
});

阅读 332

2020-05-16

共1个答案

一尘不染

看一下：

$(document).ready(function () {
    $(document).click(function (event) {
        var clickover = $(event.target);
        var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
        if (_opened === true && !clickover.hasClass("navbar-toggle")) {
            $("button.navbar-toggle").click();
        }
    });
});

我知道，调用click()并不是很优雅，但collapse('hide')对我也不起作用，而且我认为该动画比几乎很难添加和删除类更好。

2020-05-16