Bootstrap 引导导航折叠切换一次

esbemjvw 于 2022-12-07 发布在 Bootstrap

关注(0)|答案(2)|浏览(240)

在我开发的网站上有一个可折叠的菜单，但是折叠只能切换一次。我点击“菜单”，菜单展开，再次点击，菜单关闭，但是不能继续切换。
这里有一个到我的开发服务器的链接。只要调整浏览器窗口的大小，直到“菜单”按钮出现，然后单击它。
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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/11959501/bootstrap-nav-collapse-toggles-once

2条答案

按热度按时间

aemubtdh1#

本例中的问题是两个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 值，您就应该做得很好。