引导导航折叠切换一次

Bootstrap nav-collapse toggles once

本文关键字：一次 导航 折叠      更新时间：2023-09-26

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

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

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>

在你的情况下，问题是两个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 之后加载引导转换.js。 只要ccm.app.js只是在寻找真实的价值观，你应该是好的。

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

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

相关文章：