Question

我正在开发的网站上有一个可折叠的菜单，但崩溃只是翻了一次。单击“菜单”菜单展开，再次单击，菜单关闭，但不会继续切换。

这是我的开发服务器的链接。只需调整浏览器窗口的大小，直到“MENU”按钮出现并单击它。

http://www.corporateprdev.com/ymcakpt

这是我的菜单结构：

<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">
        MENU
      </a>
      <a class="brand" href="/ymcakpt/"><img src="/ymcakpt/themes/responsive/images/y-nav-collapse.png" alt="YMCA::Home" longdesc="images/y-nav-collapse.png" align="left" style="margin-right: 15px;"></a>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active">
            <a  href="/ymcakpt/">Home</a>
          </li>
          <li>
            <a href="/ymcakpt/index.php/about/"  >About</a>
          </li>
          <li>
            <a href="/ymcakpt/index.php/membership/"  >Membership</a>
          </li>
          <li>
            <a href="/ymcakpt/index.php/schedules/"  >Schedules</a>
          </li>
          <li>
            <a href="/ymcakpt/index.php/contact-us/"  >Contact Us</a>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="/ymcakpt/index.php/search/">
          <input name="query" type="text" class="search-query" placeholder="Search" style="padding: 2px 8px; margin: 0; width: 210px;">
          <input name="Submit" class="submit" type="image" src="/ymcakpt/themes/responsive/images/go-btn.png" value="Go" style="width: 35px; height: 25px;">
    </form>
          </div><!--/.nav-collapse -->
        </div>
      </div>

Answer 1

您的案例中的问题是两个JavaScript文件之间的冲突，即 bootstrap-transition.js 和 ccm.app.js 。他们都写入jQuery变量$.support.transition。 Bootstrap要求它是一个包含属性end的对象，该属性包含在CSS3过渡结束时触发的浏览器特定事件。另一个文件覆盖support.transition只是一个布尔值。

调用hide方法时，transitioning设置为true，并且因为未指定过渡结束的事件名称，transitioning属性永远不会重置为false。这会导致以后对Collapse插件show或hide的任何调用发生短路。

您可以尝试修改 ccm.app.js 以与Twitter Bootstrap的Transitions插件兼容。简单地添加一个检查以不覆盖现有值可能就足够了。

另一个选择是尝试确保在 ccm.app.js 之后加载 bootstrap-transition.js 。只要 ccm.app.js 只查找 truthy 值，您就应该做得很好。

Answer 2

我遇到了同样的问题，它是由包含javascript文件的双重引起的。

我包含我的库javascript文件两次，当我删除重复的文件时，它运行良好。

Bootstrap nav-collapse切换一次

2 个答案: