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

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

navbar toggle

按钮

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

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

jQuery(document).click(function() {

});

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

stopPropagation（）

并不总是最好的解决方案。而是使用类似于：

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

    // Hide navbar
});

我认为，假设您永远不想从

.navbar

收听任何其他事件是危险的。如果使用

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

你的小提琴与之配合：

它是的一个修改版本，缺少动画，也稍微复杂一点

---

我知道，调用

click（）

不是很优雅，但是

collapse（'hide'）

对我也不起作用，我认为动画比添加和删除类要好一些。

我决定使用的解决方案是从这里和其他地方的公认答案中获得的

---

如果用户单击

.navbar

元素之外的任何位置，则会隐藏打开的折叠导航菜单。当然，单击

.navbar toggle

也可以关闭菜单。

接受的答案似乎无法正常工作。它只需要检查“导航栏折叠”是否具有“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');
    }
});

---

我在@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();
        }
    });
});

---

使用这个对我很有用

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

对于引导4 引导程序4在类中没有

。这是咖啡脚本

  $(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事件。不过，单击图像确实会触发事件。
我有一个场景，在这个场景中，我有纯文本，如果用户在意外事件中单击纯文本，我不希望面板关闭。此处的其他答案将关闭面板，即使您单击了非链接项目的文本

为了解决这个问题，我在Paul Tarr的答案中添加了一个选项，将解决方案包装在一个检查中，以查看单击是否发生在内部的任何位置：

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

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

$（文档）。单击（函数（事件）{
if（$（event.target）.parents（“.navbar collapse”）.length<1）{
var clickover=$（event.target）；
var$navbar=$（“.navbar折叠”）；
var_opened=$navbar.hasglass（“in”）；
如果（_opened===true&&！clickover.hasClass（“导航栏切换”））{
$navbar.collapse（'hide'）；
}
}
});

在这里，您可以看到，如果单击面板内部的非链接，它将不会折叠它。
对于引导4：

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

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

转换了nozzleman对Bootstrap 4（.3.1）的回答：

放置在ngOnInit（）中

加载文档时，此代码将等待单击事件。如果移动菜单下拉菜单打开（即导航栏的可折叠部分具有“显示”类），并且单击的对象（目标）不是移动菜单按钮（即没有“导航栏切换器”类），则我们告诉移动菜单按钮它已被单击，然后菜单关闭。
以下代码对我很有用，优点是在小屏幕上，当您使用.navbar.navbar展开类单击其nav父级时，它不会隐藏.collapse：

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

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

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（）
。
当我单击菜单外部时，演示中的“断开”链接将关闭；什么坏了？@Paulie\u D我已经用我的尝试更新了我的问题。@cDima你指的是什么坏了的链接？我没有看到。我假设他是指“汉堡包”元素以适当的宽度打开菜单，然后重新单击关闭它。我假设他希望在单击任意位置时发生相同的“关闭”。因此，只要在JQuery函数中选择
主体
，假设检查菜单是否打开即可。Hi@pstenstrm。谢谢你，虽然它似乎不起作用？我已经用jQuery更新了JSFIDLE:嗯，
.navbar
几乎就是整个文档。我已经更新了我的答案！我给了主体一个700px的高度，因此JSFIDLE更好地说明了正在发生的事情：-现在的问题是在主体中单击关闭和打开下拉列表。我只需要把它关上。只能通过切换按钮
navbar toggle
打开。是的，我不知道为什么
collapse（'hide）
不起作用。不过，这个解决方案工作得很好。如果导航栏包含搜索框，它将不起作用，单击搜索文本输入不得关闭导航栏：无论出于什么原因，我在最新的引导程序3中需要它：.hasClass（“导航栏折叠”），在angularJS和ui路由器中使用时，这是非常好的工作方式。在$stateChangeSuccesses上使用它很好，如果使用Aurelia，您可以这样使用它
this.eventAggregator.subscribe（'router:navigation:success'，response=>{jQuery（“navigation button.navbar toggle”）。click（）；}）缺少结束单击方法的右括号。}）；对我来说，只要换一个就行了。我会确保，如果用户确实单击了打开的导航上的某个不是链接的地方，它将保持打开状态。如何将其与导航栏中的输入框结合起来？因为当我点击输入框时
$(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();
            }
        }
    );
});

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

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