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

Question

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

请参阅此处获取示例和代码:

到目前为止,我已经尝试了以下似乎不起作用:

jQuery(document).click(function() {

});

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

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')也不适用于我,我认为动画比添加和删除类几乎没有更好.

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');
    }
});

Answer 3

使用这个对我有用.

$(function() {
  $(document).click(function (event) {
    $('.navbar-collapse').collapse('hide');
  });
});

Answer 4

我决定使用的解决方案取自这里接受的答案和答案

jQuery('body').bind('click', function(e) {
    if(jQuery(e.target).closest('.navbar').length == 0) {
        // click happened outside of .navbar, so hide
        var opened = jQuery('.navbar-collapse').hasClass('collapse in');
        if ( opened === true ) {
            jQuery('.navbar-collapse').collapse('hide');
        }
    }
});

如果用户单击.navbar元素外部的任何位置,则会隐藏打开的折叠导航菜单.当然点击.navbar-toggle仍然可以关闭菜单.

Answer 5

为 Bootstrap 4(.3.1) 转换了喷枪工的答案：

$(document).ready(function () {
    $(document).click(
        function (event) {
            var target = $(event.target);
            var _mobileMenuOpen = $(".navbar-collapse").hasClass("show");
            if (_mobileMenuOpen === true && !target.hasClass("navbar-toggler")) {
                $("button.navbar-toggler").click();
            }
        }
    );
});

放置在 ngOnInit() 中。

加载文档时，此代码等待单击事件。如果移动菜单下拉菜单是打开的（即导航栏的可折叠部分具有“显示”类）并且单击的对象（目标）不是移动菜单按钮（即没有“导航栏-toggler”类），则我们告诉移动菜单按钮它已被点击，然后菜单关闭。