Twitter Bootstrap 2，折叠导航

Question

使用Twitter Bootstrap 2，如何使链接在折叠导航（collapse-nav）中起作用：

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="/index.html">Hubsphere - Controller</a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="">
            <a href="./index.html">Overview</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>    

我已经包含了jQuery和bootstrap-collapse.js文件。

我尝试过调用$('.nav-collapse').collapse()，但这只会打开折叠区域，而不会激活按钮。正如我所期望的那样，它应该可以使用标记来工作。

谢谢。

- nodrog

---

我已经添加了bootstrap-collapse.js，但似乎没有起到帮助的作用。 - nodrog

请仔细阅读 Bootstrap 的文档。http://twitter.github.com/bootstrap/javascript.html#collapse 你错过了实际调用函数 $(".collapse").collapse() 的部分，请注意页面上也需要包含 jQuery。 - Jamie Taniguchi

谢谢指出阅读文档的重要性，我已经阅读并改进了代码。如果您同时阅读代码和文档，您会发现有一个标记选项，应该可以正常工作，而无需调用 $(".collapse").collapse()，在这种情况下是错误的，因为它需要是 .nav-collapse。从 Bootstrap 网站上，您会看到他们没有在任何地方调用它。如果您确实调用它，它只会打开您调用它的折叠！难道您没有阅读问题吗？它显示了一个固定在顶部的导航栏... - nodrog

Answer 1

我的问题是将bootstrap.js和bootstrap-collapse.js包含在同一个文件中，我以为需要同时使用这两个库，但实际上bootstrap.js已经包含了所有的Bootstrap JS代码。现在我明白了。

- nodrog

---

天啊！我在这个问题上浪费了2到3个小时！！我检查了一下，发现我也遇到了你提到的混乱情况...我有两个文件。只需要主要的那一个。他们应该让这更清楚。谢谢！ - MattSlay

是的，这非常令人恼火，当你解决问题时会感到后悔...很高兴最终我的时间有所帮助。 - nodrog

我有bootstrap.js但没有bootstrap-collapse.js，在IE、Firefox和移动Safari的小屏幕下打开菜单时，效果符合预期，但在Chrome中不行。 - David Alpert

Answer 2

我有点好奇是否在bootstrap 2.0.4中仍然存在这个问题。

实际上，同时包括bootstrap.js和bootstrap-collapse.js并没有意义，因为bootstrap.js已经包括了bootstrap-collapse.js。

只需包括boostrap-collapse.js http://jsfiddle.net/baptme/YWUmb/6/

它按预期完美地工作。

同时包括boostrap.js和boostrap-collapse.js： http://jsfiddle.net/baptme/YWUmb/5/

如果您第一次单击折叠按钮，则div将立即打开并关闭。(我认为这是因为插件声明了两次)。

之后它会正常工作。

此问题特定于早期版本的Twitter Boostrap(2.0.0)，但已由于插件结构的更改而得到处理或不再发生。

- baptme

Answer 3

还有一种情况是在引入 bootstrap-responsive.css 文件之后需要引入 bootstrap.css 文件才能使按钮显示出来。请确保在引入 bootstrap-responsive.css 之前先引入 bootstrap.css。

- Bryan

Answer 4

你可以选择包含完整的Bootstrap jQuery库（其中包含所有插件的所有js），或者只包含单个库。

例如：如果您想使用工具提示，您可以：

• 包含：js/bootstrap.js（包含所有插件）

或者

• 包含：bootstrap/js/bootstrap-tooltip.js

第二种方法更好，因为它不会加载浏览器中不需要的内容！

使用GitHub上的LESS版本或通过Bootstrap网站自定义编译器编译自己的版本，永远不要使用默认版本！

- Fowowski