Twitter Bootstrap 菜单只打开和关闭一次 [英] Twitter Bootstrap menu only opens and closes once

问题描述

我的网站上有一个(标准)Twitter Bootstrap 菜单.当我缩小浏览器窗口或使用智能手机或 iPad 时，菜单会缩小，您会在右侧看到一个按钮.我可以按一次，菜单打开.我可以再次按下它，它会关闭.但是当我再次点击它时，它没有打开.您可以在 http://www.boajobs.com 查看代码.我是否错过了类似的菜单在 Twitter Bootstrap 网站上正常工作的内容?谢谢.

I have a (standard) Twitter Bootstrap menu on my site. When I reduce my browser window or use a smart phone or iPad, the menu gets reduced and you get a button on the right. I can press it once, the menu opens. I can press it again, it closes. But when I click it again it doesn't open. You can view the code at http://www.boajobs.com . Did I miss something as a similar menu works alright on the Twitter Bootstrap site? Thanks.

推荐答案

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

The minified version of the Bootstrap CSS you are using is missing some rules for CSS transitions in the .collapse class, which the bootstrap-collapse.js plugin presumes are present. When the plugin collapses the navbar, it adds a listener for a $.support.transition.end event. Since the event is never triggered, the plugin gets locked in a transitioning state, causing it to short-circuit on all future calls.

您可以通过将所需的 CSS 转换添加回您的 CSS 文件来纠正行为:

You can correct the behavior by adding the required CSS transitions back into your CSS file:

.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.

Or if you really don't want CSS transitions, you could leave out the bootstrap-transition.js from your JavaScript.

这篇关于Twitter Bootstrap 菜单只打开和关闭一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！