如何在Bootstrap 3中单击导航栏元素外部时关闭打开的折叠导航栏？ [英] How to close an open collapsed navbar when clicking outside of the navbar element in Bootstrap 3?

问题描述

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

How can I close an open collapsed navbar on clicking outside of the navbar element? Currently, the only way to open or close it is by clicking on the navbar-toggle button.

a href =http://jsfiddle.net/52VtD/5707/>此处的示例和代码：

See here for an example and code:

到目前为止，我试过以下似乎无效：

So far, I have tried the following which doesn't seem to work:

jQuery(document).click(function() {

});

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

推荐答案

看看：

$(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'）对我来说也不行，我认为动画比添加和删除类稍微好一些。

I know, invoking the click() isn't very elegant, but collapse('hide') did not work for me either, and i think the animation is a bit nicer than adding and removing the classes hardly.

这篇关于如何在Bootstrap 3中单击导航栏元素外部时关闭打开的折叠导航栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！