Bootstrap nav-collapse toggles once

Question

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>

Answer 1

The problem in your case is a collision between two JavaScript files, namely bootstrap-transition.js and ccm.app.js . They are both writing to the jQuery variable $.support.transition . Bootstrap requires that to be an object which includes the property end which contains the browser specific event which is fired at the end of a CSS3 transition. The other file is overwriting the support.transition to only be a boolean.

When the hide method is called, transitioning is set to true and because the name of the event which signals the end of the transition is undefined, the transitioning property never gets reset to false. This causes any future calls to show or hide on the Collapse plugin to short-circuit.

You could try modifying the ccm.app.js to be compatible with Twitter Bootstrap's Transitions plugin. Simply adding a check to not overwrite existing values might suffice.

Another option is trying to ensure that bootstrap-transition.js is loaded after ccm.app.js . As long as ccm.app.js is only looking for truthy values, you should be good.

Answer 2

I had the same problem it was caused by double including of javascript files.

I did include my library javascript files twice , when I removed the repeated ones, it is working well.