【发布时间】:2014-12-01 13:00:51
【问题描述】:
我在使用 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)
}
来自引导缩小的 js 文档。
导航栏本身的代码如下,主要编辑是删除容器,尽管即使存在容器也无法正常工作。我这辈子都想不通,感谢您的帮助。
<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>
【问题讨论】:
-
只需从Bootstrap Navbar 复制代码,然后确保链接到引导程序的依赖项
jQuery和bootstrap.min.js。 -
尝试用
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">替换行<div class="collapse navbar-collapse" id="navigation-toggle"> -
@Rafael 如下所述,原始未编辑的导航栏有效,但是当我删除除
navbar-right类之外的所有链接时,此问题存在。 -
@Banzay 的 id 以及 data-target 已经更新,即使是原来的标题效果还是一样的。
标签: javascript jquery html css twitter-bootstrap