Twitter bootstrap 引导折叠导航栏在使用js折叠时显示额外的动画

使用引导默认导航栏时，选择菜单项时，菜单不会自动折叠

我想用以下代码更改此行为：

$(document).ready(function(){

    var activatableButtons = $('.nav.navbar-nav a'),
        navbar = $('#bs-example-navbar-collapse-1');

    activatableButtons.click(function(){
        navbar.collapse('hide');
    });

});

我正在使用：

jquery 2.1.0

bootstrap 3.2.0

HTML：默认导航栏示例

我设置了一个JSFIDLE：

问题描述：选择菜单按钮时看到的动画

第一次和第二次单击时，菜单的折叠状态似乎已切换。 在最初的两次点击后，一切都按预期进行-不再有动画

问：如何设置，使两次单击后的状态在一开始就出现

测试1：

• 使浏览器变宽，使菜单处于“桌面模式”
• 运行代码
• 单击其中一个“链接”按钮 ->错误：看到一些动画
• 单击其中一个“链接”按钮 ->错误：看到一些动画
• 单击其中一个“链接”按钮 ->好的：没有动画

没有更多的动画-好的

测试2：

• 使浏览器变宽，使菜单处于“桌面模式”
• 运行代码
• 单击其中一个“链接”按钮 ->错误：看到一些动画
• 使浏览器变窄，使菜单处于“电话模式” ->错误：菜单已打开

---

您发布了一些您添加的代码，旨在向菜单项添加功能。请意识到，只有当这些代码显示在菜单的折叠版本中时，您才希望这些代码影响其功能，而不是当屏幕足够宽而无法显示菜单的折叠版本时

您只需要更具体地定义activatableButtons

而不是

 var activatableButtons = $('.nav.navbar-nav a'),

你可以用

 var activatableButtons = $('.nav.navbar-collapse.collapse.in li a'),

这可能不是你所需要的，但我希望它至少能告诉你你不理解的地方。我可以肯定地说，我刚才用这段代码解决了我的一个项目中类似的难题：

<script>
      $(document).ready(function () {
          $(".navbar.navbar-collapse.collapse.in li a").click(function(event) {
              $(".navbar-collapse").collapse('hide');
          });
        });
    </script>

$（文档）.ready（函数（）{
$（.navbar.navbar-collapse.collapse.in li a”）。单击（函数（事件）{
$（“.navbar collapse”）.collapse（'hide'）；
});
});

解决方案很简单：只需要一行额外的代码就可以正确初始化：

$(document).ready(function(){

    var activatableButtons = $('.nav.navbar-nav a'),
        navbar = $('#bs-example-navbar-collapse-1');

    // this extra line fixes the problem:
    navbar.collapse({toggle: false});

    activatableButtons.click(function(){
        navbar.collapse('hide');
    });

});

---

抱歉这么晚了。我已经检查了你的修正，但不明白。由于jquery select只查找“a”元素，这些元素位于设置了类“in”的导航栏中，因此选择为空（“in”不是在开始时设置的），并且永远不会到达click回调。你可以检查这个：1。更改小提琴代码，2。快跑，3。缩小视野，4。打开菜单，5。选择一个链接。我想用此选项关闭菜单，但这不会发生。这是与原来的选择器-与提到的副作用。同时，我找到了一个单线解决方案；看看我的答案。