Bootstrap导航栏折叠 - 如何通过点击关闭

我想这是一个菜鸟问题。我希望Bootstrap“navbar-collapse”通过点击或单击其中一个列表项来关闭。我发现这个代码的地方，它的作品。Bootstrap导航栏折叠 - 如何通过点击关闭

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

但是，这段代码还使Bootstrap“panel-collapse”元素靠近点击离开，当然我不希望发生这种情况。

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

来源

2016-07-27 ozone

让您的导航栏崩溃元素的新类和内部分配给它：您添加类导航栏崩溃元素，而无需去除老班

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

注意。

来源

2016-07-27 13:06:13

谢谢。即使使用标准的Bootstrap类“navbar-collapse”，你的代码也可以工作。我以前用错了。 – ozone

你的代码是正确的。

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

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

此外，请确保你在你的文件有

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

。

来源

2016-07-27 13:07:25

检查您是否在导航栏外单击。折叠方法可预期地使用我们的参考导航栏

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

来源

2016-07-27 13:07:53

如果您使用的是引导navbar类被解雇，你可以简单地做：

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

这将隐藏所有崩溃元件，其子女的navbar类。

来源

2016-07-27 13:08:10

Bootstrap导航栏折叠 - 如何通过点击关闭

回答

相关问题