Twitter Bootstrap（v2.2.1）下拉链接无法在移动设备上运行 [英] Twitter Bootstrap (v2.2.1) dropdown links not working on mobile
问题描述
我有一个Twitter Bootstrap（v2.2.1）可折叠的导航栏和下拉按钮。它们在我的桌面浏览器中工作得非常好奇和快乐，如果我将桌面浏览器窗口缩小到移动尺寸，他们也可以愉快地工作。
I have a Twitter Bootstrap (v2.2.1) collapsable navbar and dropdown buttons. They work all chirpy and happy in my desktop browser and also if I resize down my desktop browser window down to mobile size they work happily.
但是在移动设备上，下拉菜单当您点击下拉列表但点击下拉列表中的任何链接时，只会导致下拉列表关闭而不关注链接。
However on a mobile, the dropdowns will open up when you click on the dropdown but clicking on any of the links within the dropdown just causes the dropdown to close without following the link.
这似乎与< a href =https://stackoverflow.com/questions/9213473/twitter-bootstrap-2-navbar-submenu-links-do-not-work>这个另外的问题，但解决方案是将 data-toggle =dropdown移到我已经拥有它们的地方。
This seems similar to this other SO question, but the solution there was to move the data-toggle="dropdown" to the place I have them already.
这是html上的html下拉按钮的页面：
Here's the html on the page for the dropdown buttons:
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="btn-group">
<a class="btn btn-primary" href="link1.php">
Dropdown button
</a>
<a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="nav-header">Recent</li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://bing.com">Bing</a></li>
</ul>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
/**
* Twitter Bootstrap JQuery
*/
//!function ($) {
$(function () {
$('.dropdown-toggle').dropdown();
});
//}
</script>
</body>
</html>
我在移动Opera，移动Firefox和默认Android浏览器的Android手机上测试过。
I tested it on an android mobile in the Mobile Opera, Mobile Firefox and default android browser.
推荐答案
我已将其跟踪到Bootstrap 2.2.1中的一个错误 2.2.2更改日志声明：
I've tracked it down to a bug in Bootstrap 2.2.1 the changelog for 2.2.2 states:
下拉列表：添加了临时修复对于移动设备上的下拉菜单，以防止它们提前关闭。
Dropdowns: Temporary fix added for dropdowns on mobile to prevent them from closing early.
如果我将我的网站上的bootstrap.js从v2.2.1交换到v2 .2.2然后按钮开始工作。
If I swapped the bootstrap.js on my site from v2.2.1 to v2.2.2 then the buttons start working.
现在，如果我在 jsFiddle 使用最新的v2.2.2 Bootstrap然后它可以工作。
So now, if I view this code on jsFiddle using the latest v2.2.2 Bootstrap then it works.
<html>
<head>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
</head>
<body>
<div class="container">
<div class="btn-group">
<a class="btn btn-primary" href="link1.php">
Dropdown button
</a>
<a class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown">
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li class="nav-header">Recent</li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://bing.com">Bing</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<script type="text/javascript">
$(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
这篇关于Twitter Bootstrap（v2.2.1）下拉链接无法在移动设备上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
