自动关闭响应式导航栏

Question

我正在使用Bootstrap响应式导航栏.折叠导航栏并打开菜单并单击菜单项时,菜单不会自动关闭,我必须自己手动完成.

单击其中一个按钮后是否可以自动关闭菜单？

Answer 1

引导程序的工作解决方案3

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 2

编辑: 正如Maximus在下面指出的那样,3.x引导程序解决方案是:

$('.navbar-collapse a').click(function(){
    $(".navbar-collapse").collapse('hide');
});

https://jsfiddle.net/yohuLuj2/

2.x bootstrap的旧答案:

您应该能够通过向列表项添加单击处理程序然后以这种方式关闭导航来实现此目的.

$('.nav-collapse').click('li', function() {
    $('.nav-collapse').collapse('hide');
});

继承人:http: //jsfiddle.net/hajpoj/By6ym/4/

Answer 3

我只是在每个链接上复制btn-navbar的2个属性(data-toggle ="collapse"data-target =".nav-collapse"),如下所示:

<div class="nav-collapse">
  <ul class="nav" >
    <li class="active"><a href="#home" data-toggle="collapse" data-target=".nav-collapse">Home</a></li>
    <li><a href="#about" data-toggle="collapse" data-target=".nav-collapse">About</a></li>
    <li><a href="#portfolio" data-toggle="collapse" data-target=".nav-collapse">Portfolio</a></li>
    <li><a href="#services" data-toggle="collapse" data-target=".nav-collapse">Services</a></li>
    <li><a href="#contact" data-toggle="collapse" data-target=".nav-collapse">Contact</a></li>
  </ul>
</div>

Answer 4

我只能添加到jason的解决方案中是下拉列表的例外.如果有人只是单击以切换子菜单,则您不想关闭菜单.所以…

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    $(".navbar-collapse").collapse('hide');
});

Answer 5

@ Mike的下拉解决方案对我有用,只是下拉切换中的项目不会隐藏菜单,所以我确保添加:

$('.navbar-collapse .dropdown-menu').click(function(){
    $(".navbar-collapse").collapse('hide');
});