Bootstrap导航折叠一次

问题描述

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

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.

这是到我的开发服务器的链接.只需调整浏览器窗口的大小，直到出现"MENU"按钮，然后单击它即可.

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

这是我的菜单结构:

<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覆盖为一个布尔值.

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.

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

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.

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

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.

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

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.

这篇关于Bootstrap导航折叠一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！