2

I have a collapsable menu on a website I'm developing, but the collapse is only toggling through once. I click "MENU" the menu expands, click it again, the menu closes, but won't continue toggling.

Here is a link to my development server. Just resize the browser window until the "MENU" button shows up and click it.

http://www.corporateprdev.com/ymcakpt

Here is my menu structure:

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

2 回答 2

4

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

当hide调用该方法时，transitioning将其设置为，true并且由于未定义表示转换结束的事件名称，因此该transitioning属性永远不会重置为 false。这会导致将来对 Collapse 插件的任何调用show或hide对 Collapse 插件的调用都会短路。

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

另一种选择是尝试确保在ccm.app.js之后加载bootstrap-transition.js。只要ccm.app.js只寻找真实的值，你应该是好的。

于 2012-08-14T20:30:56.050 回答
0

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

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

于 2015-02-23T11:42:47.207 回答