Question

使用bootstraps默认导航栏：http://getbootstrap.com/components/#navbar时，选择菜单项时菜单不会自动折叠。

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

$(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：默认导航栏示例http://getbootstrap.com/components/#navbar

我设置了一个jsfiddle：http://jsfiddle.net/Ludmilla/5c3supgt/

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

问：如何进行设置，以便在开始时出现2次点击后的状态？

测试1：

使浏览器更宽，以便菜单处于桌面模式＆＃39;
运行代码
点击其中一个链接＆＃39;纽扣 - ＆GT;错误：看到一些动画
点击其中一个链接＆＃39;纽扣 - ＆GT;错误：看到一些动画
点击其中一个链接＆＃39;纽扣 - ＆GT;好的：没有动画

没有更多动画 - 好的

测试2：

使浏览器更宽，以便菜单处于桌面模式＆＃39;
运行代码
点击其中一个链接＆＃39;纽扣 - ＆GT;错误：看到一些动画
使浏览器缩小，以便菜单处于电话模式＆＃39; - ＆GT;错误：菜单已打开

Answer 1

您发布了一些已添加的代码，用于向菜单项添加功能。如果这些代码显示在菜单的折叠版本中，而不是当屏幕宽度足以显示而没有折叠版本的菜单时，您只希望此代码影响其功能。

您只需要更具体地定义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>

Answer 2

解决方案很简单：只需要一个额外的行，以便正确初始化：

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

});

使用js折叠时，bootstrap折叠导航栏会显示额外的动画

2 个答案: