twitter-bootstrap - Twitter Bootstrap 菜单只打开和关闭一次

Question

我的网站上有一个（标准）Twitter Bootstrap 菜单。当我缩小浏览器窗口或使用智能手机或 iPad 时，菜单会缩小，您会在右侧看到一个按钮。我可以按一次，菜单打开。我可以再按一次，它就关闭了。但是当我再次单击它时，它不会打开。您可以在http://www.boajobs.com查看代码。我错过了什么，因为类似的菜单在 Twitter Bootstrap 网站上可以正常工作吗？谢谢。

Answer 1

您使用的 Bootstrap CSS 的缩小版本缺少.collapse类中 CSS 转换的一些规则， bootstrap-collapse.js插件假定这些规则存在。$.support.transition.end当插件折叠导航栏时，它会为事件添加一个监听器。由于该事件从未被触发，插件被锁定在一个transitioning状态，导致它在所有未来的调用中短路。

您可以通过将所需的 CSS 过渡添加回您的 CSS 文件来纠正此行为：

相关引导 CSS (v.2.1.1)

.collapse {
  position:relative;
  height:0;
  overflow:hidden;
  -webkit-transition:height 0.35s ease;
  -moz-transition:height 0.35s ease;
  -o-transition:height 0.35s ease;
  transition:height 0.35s ease;
}
.collapse.in {
  height:auto;
}

或者，如果您真的不想要 CSS 过渡，您可以从 JavaScript 中省略bootstrap-transition.js 。