Twitter bootstrap 自动关闭导航栏

我使用的是引导响应导航条。当导航栏折叠时，我打开菜单并单击菜单项，菜单不会自动关闭，我必须自己手动关闭

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

编辑： 正如下面指出的，3.x引导解决方案是：

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

---

2.x引导的旧答案：

您应该能够通过向列表项添加一个单击处理程序，然后以这种方式关闭nav来实现这一点

$（'.nav collapse'）。单击（'li'，函数（）{
$（'.nav collapse'）。collapse（'hide'）；
});

这里有一个JSIDLE：

---

记住向上遍历DOM树并关闭相关的导航栏，而不是所有导航栏。特别是对于Bootstrap 3，请使用类似于以下代码段的内容：

$（“body”）。在（“单击”上，“.navbar折叠a”，函数（）{
var$this=$（this）；
setTimeout（函数（）{
$this.closed（“.navbar collapse”）.collapse（'hide'）；
}, 350);
});

我只是在每个链接上复制btn导航栏的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>

引导3的工作解决方案

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

---

我唯一想给jason的解决方案添加的是下拉列表的例外。如果有人只是单击以切换子菜单，则不希望关闭菜单。所以

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

---

另一个问题是，当您在桌面上看到导航栏时，它会试图隐藏/显示导航栏，因此我做了以下操作：

$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
    if($(window).width() < 768 )
        $('.navbar-collapse').collapse('hide');
});

$（'.navbar折叠a:not（.dropdown toggle'）。单击（函数（）{
如果（$（窗口）.width（）<768）
$（'.navbar collapse'）。collapse（'hide'）；
});

我通过添加按钮单击管理来完成答案：

$(document).on('click', '.navbar-collapse.collapse.in a:not(.dropdown-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});
$(document).on('click', '.navbar-collapse.collapse.in button:not(.navbar-toggle)', function() {
    $(this).closest(".navbar-collapse").collapse('hide');
});

---

@Mike的下拉解决方案对我有效，除了下拉切换中的项目不会隐藏菜单，所以我确保添加以下内容：

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

---

我的问题是，我正在创建带有锚的单页布局。所以，当你缩小窗口时，菜单隐藏在链接点击上是完美的。感谢上面给我线索的用户。但是，当升级窗口时，绑定事件始终存在（但不需要重新加载）。这就是我所做的。希望对某人有所帮助：）

---

如果使用“角度”，则可以将折叠绑定到路线导航：

$scope.$on('$routeChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $(".navbar-collapse").collapse('hide'); });

---

只需将此代码放在main.js中

 $(document).on('click', '.navbar-collapse.in', function (e) {
    if ($(e.target).is('a')) {
        $(this).collapse('hide');
    }
});

---

也许有人需要隐藏菜单时，只需点击到其他地方（我认为好像并没有子菜单）。然后只需在jquery、bootstrap.js之后的某个地方添加此代码

$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });

---

不要忘记手动重置按钮外观：$（'.navbar toggle'）.addClass（'collapsed'）；是不是

.navbar collapse

？我正在Chrome58的设备检查工具中尝试同样的方法。那边不行。是否有人可以提出替代方案或说明问题？请注意，自此评论日期起，以下所有答案也将阻止您单击菜单本身内的下拉列表。但带有

a:not（.dropdown toggle）

的答案确实允许您单击下拉列表。但也要注意，几乎所有这些答案在桌面上查看时都会给出FOUC，或者进行可见菜单重画。解决此问题的快速方法是选择窗口大小：

if（$（window）.width（）<480）$（“.navbar collapse”）.collapse（'hide'）

我希望这是twitter Bootstrapt提供的默认行为，这是我在BT3does上使用的一种，如果菜单中有下拉菜单，它仍然可以工作？非jquery解决方案工作得更好，更易于维护！如果您使用的是Angular之类的框架，并且不想使控制器混乱，最好的答案是在这里。如果您在非折叠菜单上使用此框架，您仍然会得到折叠效果，这看起来非常奇怪。@Stony您必须将

.in

添加到

数据目标的末尾
值：
数据目标=.navbar collapse.in
。从此答案中的注释：通过添加“.collapse.in”来更改查询选择器，以仅选择打开的导航栏。我不理解您的注释，但您的添加（
$（window.width（）
）防止在桌面站点上查看时出现令人讨厌的FOUC，因此+1。
$('button.navbar-toggle').focusout(function(){
        $(".navbar-collapse").collapse('hide');
    });