Bootstrap v2下拉导航无法在移动浏览器上使用
我在移动设备上的Bootstrap菜单下拉（Bootstrap 2）有问题。 在这里用下拉button问了一个类似的问题，但是这个答案是bootstrap中的一个固有的bug，在更新中解决了。 我似乎有同样的问题，所以也许这是我的标记？
我有一个可折叠的下拉菜单导航栏，一切工作完美的桌面浏览器。 但是，在移动设备上，当您点击下拉菜单时，下拉菜单会打开，但点击任何下拉菜单链接都会将下拉菜单再次折叠 – 链接无法到达。 我试过各种引导版本，不能纠正这个，所以我只能想象它是我的标记。 这里是：
<header class="navbar"> <div class="navbar-inner"> <div class="container"> <a href="#"><h1>Branding</h1></a> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> Menu </button> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#">Menu Item 1</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Dropdown Item 1</a></li> <li><a href="#">Dropdown Item 2</a></li> <li><a href="#">Dropdown Item 3</a></li> <li><a href="#">Dropdown Item 4</a></li> </ul> </li> <li><a href="#">Menu Item 3</a></li> <li><a href="#">Menu Item 4</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> </header> 下面是一个复制代码的例子（对不起，不能发送该网站）： http : //jsfiddle.net/yDjw8/1/
（问题只能在手机上看到/复制 – 我正在使用iOS）
任何帮助将不胜感激。
在你缩小的bootstrap.min.js文件中，find子string
"ontouchstart"
并用其replace
"disable-ontouchstart"
看看这个类似的SO问题： Bootstrap折叠菜单链接无法在移动设备上工作
发现此修复程序的版本2.3.2：
<script> jQuery(document).ready(function($) { $("li.dropdown a").click(function(e){ $(this).next('ul.dropdown-menu').css("display", "block"); e.stopPropagation(); }); }); </script>
在两个独立的导航系统上工作。
我正在使用BootStrap 3.1.1。 我已经尝试了很多答案，下拉菜单在Android设备上正常工作，但仍然不适用于iOS设备。 最后我find了问题的根源。
iPhone上的safari只支持<a>和<input>元素的点击事件 。 在iPhone上查看此段落单击事件代表团 。
所以我们需要添加自定义点击委派。 以下代码将解决问题。
$('[data-toggle=dropdown]').each(function() { this.addEventListener('click', function() {}, false); });
我解决了这个问题：
打开你的js/bootstrap-dropdown.js或缩小版本。
findtouchstart.dropdown.data-api的行或者地方
它应该只有4个发生。 像这样的东西：
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
你应该在第二次和第三次之间插入这一行：
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
你的新闻代码必须是这样的：
.on('click.dropdown.data-api touchstart.dropdown.data-api', clearMenus) .on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() }) .on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() }) .on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle) .on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
小心Bootstrap.js的缩小版本…所以你必须连接在它的确切位置的新行。
祝你好运！ 🙂
我从bootstrap git-hub论坛find了这个解决scheme。 你只需要在脚本中包含一行代码就可以了，
$（'body'）。on（'touchstart.dropdown'，'.dropdown-menu'，function（e）{e.stopPropagation（）;}）;
它的工作对我来说！
我build议下载最新的Bootstrap文件，并用新版本replace服务器上的bootstrap.js和bootstrap.min.js。
这为我解决了这个问题。
这似乎没有任何问题。 “open”类已经存在与引导，应该工作，但由于某种原因，它不是。 这段代码强制它相应地运行。 🙂
jQuery(document).ready(function($) { $("li.dropdown").click(function(e){ $(this).toggleClass("open"); }); });
看起来这一切都在为我工作，也许尝试用新鲜的副本replace你的引导文件，因为你意外地把事情搞乱了。 或者，如果这不起作用，请确保您正在导入所有内容。 你确定你正在导入所有的CSS和JS文件吗？
当您点击下拉菜单时，它会将open类添加到您的<li class="dropdown">给您： <li class="dropdown open"> 。 当您点击下拉菜单中的链接或“菜单项2（下拉菜单）”时， open类将被删除，导致dropmenu再次折叠。
下面的小提琴显示如何停止传播的点击事件，但可能会导致你的问题在其他地方。 另外，我只在下拉菜单中阻止了项目＃1的传播。 你可以使用jQuery在下拉列表中的所有项目上都发生这种情况。
JS小提琴： http : //jsfiddle.net/yDjw8/2/
此修复程序适用于Bootstrap 2.3.2，并基于@asbanks（ https://stackoverflow.com/a/18107103/437019 ）的答案。
除了asbanks的回答之外，这个脚本还会通过下拉菜单中的链接传播JS调用，打开的下拉菜单会closures其他打开的菜单。
$(function() { return $("a.dropdown-toggle:not(.multiselect)").click(function(e) { $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none"); $(this).next("ul.dropdown-menu").css("display", "block"); return e.stopPropagation(); }); }); $(document).on('click click.dropdown.data-api', function(e) { if (!$(e.target).closest('.dropdown, .multiselect-container').length) { return $("ul.dropdown-menu:not(.multiselect-container)").css("display", "none"); } });
我正在使用bootstrap-3.3.1，并且在Android手机应用程序中遇到同样的问题。
经过几次试验和错误，我发现了一个有趣的解决方法：
// clueless hack here!!!! otherwise dropdown menu doesn't work $('.dropdown-toggle').dropdown('toggle'); $('.dropdown-toggle').dropdown('toggle');
jquery-1.11.2，bootstrap-3.3.2：
$('#yourId').on('hidden.bs.dropdown', function (){ $(this).click(function (event) { $('.dropdown-toggle').dropdown('toggle'); }); });
我认为，如果你做了以下，链接将正常工作
$(document).ready(function(){ $('.youClass').click(function(){ var menuItem = '<a class=" " href=" ">Log Out</a>'; $('.anotherClass').append('<li class=".youClass">'+ menuItem +'</li>'); }); });
添加role="button"到<a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Item 2 (Dropdown)<b class="caret"></b></a>为我工作
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Menu Item 2 (Dropdown)<b class="caret"></b></a>
