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

Question

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

有关示例和代码，请参见 此处：

到目前为止，我已经尝试了以下似乎不起作用的方法：

 jQuery(document).click(function() {

});

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

原文由 henrywright 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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();
        }
    });
});

你的小提琴适用于：http: //jsfiddle.net/52VtD/5718/

它是 此答案 的修改版本，缺少动画并且稍微复杂一点。

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

原文由 nozzleman 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

接受的答案似乎无法正常工作。它只需要检查“navbar-collapse”是否有“in”类。然后我们可以通过使用我们对导航栏的引用来按预期触发折叠方法。

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

原文由 Paul Tarr 发布，翻译遵循 CC BY-SA 3.0 许可协议