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

Question

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

示例和代码见here：

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

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/

它是this answer的修改版，缺少动画，也稍微复杂一点。

我知道，调用 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

我决定使用的解决方案取自此处接受的答案和this answer

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() 中。

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

Answer 6

stopPropagation() 并不总是最好的解决方案。而是使用类似的东西：

jQuery(document.body).on('click', function(ev){
    if(jQuery(ev.target).closest('.navbar-collapse').length) return; // Not return false

    // Hide navbar
});

我认为假设您永远不想收听来自.navbar 的任何其他事件是很危险的。如果你使用stopPropagation()，这是不可能的。

Answer 7

我有一个场景，我有纯文本，如果用户意外单击纯文本，我不希望面板关闭。即使您单击不是链接的项目的文本，此处的其他答案将关闭面板。

为了解决这个问题，我在 Paul Tarr 的回答中添加了一个检查方法，以查看点击是否发生在内部任何地方：

if ($(event.target).parents(".navbar-collapse").length < 1) { }

完整的代码将变为：

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

在这个demo fiddle 中，您可以看到，如果您单击面板内的非链接，它不会折叠它。

Answer 8

我在@nozzleman 的回答中添加了一个条件，以检查是否对菜单中的任何元素进行了点击或单击，如果是这样，请不要折叠它。

$(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") && clickover.parents('.navbar-collapse').length == 0) {
            $("button.navbar-toggle").click();
        }
    });
});

Answer 9

以下代码对我有用，其优点是在小屏幕上，当您使用 .navbar .navbar-expand 类单击其导航父级时，它不会隐藏 .collapse：

$(document).click(function (e) {  
    if($('.collapse').hasClass('show') && !$('nav').is(e.target) && $('nav').has(e.target).length === 0){
        $('.navbar-toggler').click()
    }
})

Answer 10

对于最新的 Bootstrap，这是正确的答案。

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

它会读取 .navbar-collapse 是否在类中包含单词 show（这意味着菜单已打开），并在您单击/点击任意位置时隐藏导航栏。

Answer 11

对于引导程序 4

Bootstrap 4 没有 in 类。这是 Coffeescript。

  $(document).click (e)->
    #console.log e.target
    unless $('#toggle-button').has(e.target).length || $('#toggle-menu').has(e.target).length
      $('#toggle-menu').collapse('hide')

所以基本上，除非你点击按钮或菜单，否则关闭菜单。

注意：奇怪的是，在 iOS 上点击文本不会注册点击事件，也不会注册 mouseup 事件。但是，单击图像会触发事件。

Answer 12

对于引导程序 4：

$(document).click(function(event) {
  $(event.target).closest(".navbar").length || $(".navbar-collapse.show").length && $(".navbar-collapse.show").collapse("hide")
});

Answer 13

$(document).click(function (event) {
 if ($('.navbar-collapse').attr('aria-expanded') == "true") {
        $('.navbar-collapse:visible').click();
    }
});

Answer 14

$(window).click(function (e) {
     if ($(e.target).closest('.codehim-dropdown').length) {
         return;
     }
     if ($(e.target).closest(offCanvas).length) {
         return;
     }

     //check if menu really opened
     if ($(hamburger).hasClass("active")) {
         closeMenu();
     }

     $(dimOverlay).fadeOut();

     $(".menu-items").slideUp();
     $(".dropdown-heading").removeClass("active");

});

Answer 15

我在这里的一些答案有一些问题，我也希望能够按需关闭扩展菜单。所以我用一个简单的函数来模拟点击。

function closeMenu(){
  element = document.getElementById('nav_top');
  if(element){
    if(element.classList.contains('show')){
      document.getElementById('navbar_toggler').dispatchEvent(new CustomEvent('click'));
    }
  }
}
$(document).ready(function () {
  $(document).click(function (event) {
    closeMenu();
  });
});

使用此方法，您可以在外部单击时关闭它，也可以随时从任何其他函数调用closeMenu()。