Question

我想这是一个菜鸟问题。我希望通过单击或单击列表项之一来关闭Bootstrap“navbar-collapse”。我在某个地方找到了这个代码并且它可以工作。

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

但是这段代码也通过点击离开使Bootstrap“面板折叠”元素关闭，当然我不希望这种情况发生。

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

Answer 1

为您的导航栏折叠元素添加一个新类并将其分配到内部：

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

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

Answer 2

您的代码是正确的。

上面显示了一个奇怪的行为，有时滚动条会出现在导航栏上。这可能来自一些花哨的CSS，但下面为我修好了。

chunk

另外，请确保您拥有

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

在您的档案中。

Answer 3

检查您是否在导航栏外单击。可以通过使用我们对导航栏的引用

来解雇崩溃方法

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

Answer 4

如果您使用的是bootstrap navbar类，则可以执行以下操作：

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

这将隐藏所有属于navbar类的子元素的折叠元素。

Bootstrap导航栏折叠 - 如何通过单击离开关闭

4 个答案: