Twitter Bootstrap(v2.2.1)下拉链接无法在移动设备上运行
icc*_*c97 5 javascript mobile jquery twitter-bootstrap
我有一个Twitter Bootstrap(v2.2.1)可折叠的导航栏和下拉按钮.他们在我的桌面浏览器中工作得非常愉快和快乐,如果我将桌面浏览器窗口缩小到移动尺寸,他们也会愉快地工作.
但是,在移动设备上,当您单击下拉列表时,下拉列表将会打开,但单击下拉列表中的任何链接只会导致下拉列表关闭而不会关注该链接.
这似乎与其他SO问题类似,但解决方案是将其移动data-toggle="dropdown"到我已经拥有它们的地方.
这是下拉按钮页面上的html:
<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手机上测试了它.
我已将其跟踪到Bootstrap 2.2.1中的2.2.2状态的更改日志中的错误:
下拉列表:为移动设备上的下拉列表添加了临时修复,以防止它们提前关闭.
如果我将我的站点上的bootstrap.js从v2.2.1交换到v2.2.2,那么按钮就会开始工作.
所以现在,如果我使用最新的v2.2.2 Bootstrap 在jsFiddle上查看此代码,那么它可以工作.
<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>