Javascript 引导导航栏折叠-如何通过单击关闭

我想这是一个没有问题的问题。我希望引导“navbar折叠”通过单击离开或单击其中一个列表项来关闭。我在某个地方找到了这段代码，它很有效

$(document).on('click',function() {
    $('.collapse').collapse('hide');
});

但是这段代码也会通过点击关闭引导“panel collapse”元素，当然我不希望发生这种情况

---

如何指定我希望此代码仅适用于“navbar折叠”元素？

为您的navbar折叠元素指定一个新类，并在其中指定它：

$('.NewClassName').collapse('hide');

请注意，您将该类添加到navbar折叠元素中，而不删除旧类。

您的代码是正确的

上面显示了一种奇怪的行为，有时导航上会出现滚动条。这可能是从一些花式的css，但下面为我修复了它

$(document).on('click',function(e){
  if($('#navbar-collapse').hasClass('in')){
    $('.collapse').collapse('hide'); 
  }
})

另外，确保你有

<script src="/js/bootstrap.min.js"></script>

---

在您的文件中。

检查您是否在导航栏外单击。通过使用我们对导航栏的引用，可以预期地触发Collapse方法

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

---

如果您正在使用引导

navbar

类，您只需执行以下操作：

$('.navbar .collapse').collapse('hide');

---

这将隐藏属于

navbar

类的所有折叠元素。

谢谢。您的代码位甚至可以与标准引导类“navbar collapse”一起工作。我之前使用它时出错了。