Html Bootstrap v2 下拉导航不适用于移动浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17178606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap v2 Dropdown Navigation not working on Mobile Browsers
提问by Stuart
I am having an issue with the Bootstrap menu dropdowns on mobile devices (Bootstrap 2). A similar question was asked herewith dropdown buttons, however the answer for that was an inherent bug within bootstrap which was solved in an update. I appear to be having the same issue so perhaps it's down to my markup?
我在移动设备（Bootstrap 2）上的 Bootstrap 菜单下拉菜单有问题。这里使用下拉按钮询问了类似的问题，但答案是引导程序中的一个固有错误，该错误已在更新中解决。我似乎遇到了同样的问题，所以也许这取决于我的标记？
I have a collapsable navbar with dropdowns and everything works perfectly on desktop browsers. However on a mobile, the dropdowns will open up when you click on the dropdown but clicking any dropdown links will just fold the dropdown back up again — the links cannot be reached. I have tried various bootstrap versions and cannot correct this so I can only imagine it is my markup. Here it is:
我有一个带有下拉菜单的可折叠导航栏，一切都在桌面浏览器上完美运行。但是在移动设备上，当您单击下拉菜单时会打开下拉菜单，但单击任何下拉链接只会将下拉菜单再次折叠起来——无法访问链接。我尝试了各种引导程序版本，但无法纠正这个问题，所以我只能想象这是我的标记。这里是：
<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>
Here's an example replicating the code (sorry, can't send the site): http://jsfiddle.net/yDjw8/1/
这是复制代码的示例（抱歉，无法发送站点）：http: //jsfiddle.net/yDjw8/1/
(Problem can only be seen/replicated on mobile — I'm using iOS)
（问题只能在移动设备上看到/复制 - 我使用的是 iOS）
Any help would be much appreciated.
任何帮助将非常感激。
回答by Jollyra
In your minified bootstrap.min.js file, find the substring
在缩小的 bootstrap.min.js 文件中，找到子字符串
"ontouchstart"
and replace it with
并将其替换为
"disable-ontouchstart"
Check out this similiar SO question: Bootstrap Collapsed Menu Links Not Working on Mobile Devices
看看这个类似的问题： Bootstrap Collapsed Menu Links Not Working on Mobile Devices
回答by asbanks
Found this fix for version 2.3.2:
为 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>
Worked on two separate nav systems I built.
在我构建的两个单独的导航系统上工作。
回答by icemelon
I am using BootStrap 3.1.1. I have tried many answers, dropdown menu works fine on Android devices but still doesn't works on iOS device. Finally I find root cause of the problem.
我正在使用 BootStrap 3.1.1。我尝试了很多答案，下拉菜单在 Android 设备上运行良好，但在 iOS 设备上仍然不起作用。最后我找到了问题的根本原因。
safari on iPhone only support click event for <a>and <input>element.
See this passage Click event delegation on the iPhone.
iPhone 上的 safari 仅支持<a>和<input>element 的点击事件。参见这段iPhone 上的 Click 事件委托。
So we need to add custom click delegation. Following code will solve the problem.
所以我们需要添加自定义点击委托。以下代码将解决问题。
$('[data-toggle=dropdown]').each(function() {
this.addEventListener('click', function() {}, false);
});
回答by Duncan Micahel-MacGregor
I recommending downloading the latest Bootstrap files and replacing the bootstrap.js and bootstrap.min.js on your server with the new versions.
我建议下载最新的 Bootstrap 文件并用新版本替换服务器上的 bootstrap.js 和 bootstrap.min.js。
This fixed the issue for me.
这为我解决了这个问题。
回答by Massa
I solved this same problem doing this:
我这样做解决了同样的问题：
1.Open your js/bootstrap-dropdown.jsor the minified version of it.
1.打开你的js/bootstrap-dropdown.js或它的缩小版本。
2.Find for the lines or places for: touchstart.dropdown.data-api
2.查找线路或地点： touchstart.dropdown.data-api
3.There should be only 4 occurs of it. Something like this:
3.应该只有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)
You should insert this new line between the 2nd and 3rd occurences:
您应该在第 2 次和第 3 次出现之间插入此新行：
.on('touchstart.dropdown.data-api', '.dropdown-menu', function (e) { e.stopPropagation() })
4.Your news piece of code must be something like this:
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('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)
Be careful on minified versions of Bootstrap.js... so you must concatenate the new line at the exact position on it.
小心 Bootstrap.js 的缩小版本...所以你必须在它的确切位置连接新行。
Good luck! :)
祝你好运！:)
回答by Jigar Trivedi
I found solution of this from bootstrap git-hub forum. You need to include just one line of code in script on document ready as,
我从 bootstrap git-hub 论坛找到了这个解决方案。您只需要在准备好文档的脚本中包含一行代码，
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });
Its work for me!!!
它为我工作！！！
回答by Kathryn
This seems to work without any issues. The class "open" already exists with bootstrap and should be working, but for some reason it isn't. This code forces it to run accordingly. :)
这似乎没有任何问题。类“open”已经存在于引导程序中，应该可以工作，但由于某种原因，它不是。此代码强制它相应地运行。:)
jQuery(document).ready(function($) {
$("li.dropdown").click(function(e){
$(this).toggleClass("open");
});
});
回答by Kathryn
Looks like it is all working to me, maybe try replacing your bootstrap files with a fresh copy incase you accidentally messed anything up in there. Or if that does not work, make sure you are importing everything. Are you sure you are importing all the CSS and the JS files?
看起来这一切对我都有效，也许可以尝试用新副本替换引导文件，以防万一你不小心弄乱了那里的任何东西。或者，如果这不起作用，请确保您正在导入所有内容。您确定要导入所有 CSS 和 JS 文件吗？
回答by Michael Freake
When you click on the dropdown, it adds the openclass to your <li class="dropdown">giving you: <li class="dropdown open">. When you click a link on the dropdown menu or the 'Menu item 2 (dropdown)', the openclass is removed causing the dropmenu to fold up again.
当您单击下拉菜单时，它会将open类添加到您<li class="dropdown">提供给您的：<li class="dropdown open">。当您单击下拉菜单或“菜单项 2（下拉菜单）”上的链接时，open该类将被删除，从而导致下拉菜单再次折叠。
The below fiddle shows how to stop the click event from propagating, but may cause you issues else where. Also, I only prevented the propagation on item #1 in the dropdown. You can use jQuery to have this happen on all items of the dropdown.
下面的小提琴显示了如何阻止点击事件传播，但可能会导致您在其他地方出现问题。另外，我只阻止了下拉列表中第 1 项的传播。您可以使用 jQuery 在下拉列表的所有项目上发生这种情况。
JS Fiddle: http://jsfiddle.net/yDjw8/2/
JS小提琴：http: //jsfiddle.net/yDjw8/2/
回答by Yossi Shasho
This fix is for Bootstrap 2.3.2, and its based on the answer by @asbanks (https://stackoverflow.com/a/18107103/437019).
此修复适用于 Bootstrap 2.3.2，它基于 @asbanks ( https://stackoverflow.com/a/18107103/437019)的回答。
On top of asbanks's answer, this script also propagates JS calls from links inside the dropdowns, and an opened dropdown closes other open ones.
除了 asbanks 的回答之外，该脚本还会从下拉列表中的链接传播 JS 调用，并且打开的下拉列表会关闭其他打开的下拉列表。
$(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");
}
});
