我在正在开发的网站上有一个可折叠的菜单,但折叠只切换了一次。我单击"菜单"菜单展开,再次单击它,菜单关闭,但不会继续切换。
这是指向我的开发服务器的链接。只需调整浏览器窗口的大小,直到出现"菜单"按钮并单击它。
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 文件两次,当我删除重复的文件时,它运行良好。