我在使用bootstrap的移动导航时遇到了令人沮丧的问题。问题是单击显示按钮后菜单项不显示。我已经在两部不同的手机上尝试过多次修复,但没有结果。
第一个修复是在http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/上添加了下面的代码,尽管这是针对2.3.2版本的。我也使用了以前的代码而没有结果。
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop').off().remove();
}
}, this), 0);
});
第二项工作是删除
if ('ontouchstart' in document.documentElement) {
$('<div class="dropdown-backdrop"/>').insertAfter($(this)).on('click', clearMenus)
}
来自bootstrap minified js doc。
导航栏本身的代码如下所示,主要编辑是删除容器,尽管即使存在容器也无法正常工作。我无法想象我的生活,感谢你的帮助。
<nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="navigation-toggle"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav>
答案 0 :(得分:0)
忘记其他手动修复因为bootstrap拥有它。只需在调用任何标准jQuery版本后调用 JS_FILE_PATH / bootstrap.min.js 即可。请记住,如果你之前没有调用jquery,bootstrap.min.js将无效。
我希望这能解决你的问题。我自己尝试过这个。