Twitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用答案

【问题标题】：Twitter Bootstrap (v2.2.1) dropdown links not working on mobileTwitter Bootstrap (v2.2.1) 下拉链接在移动设备上不起作用
【发布时间】：2013-01-09 18:50:42
【问题描述】：

我有一个 Twitter Bootstrap (v2.2.1) 可折叠导航栏和下拉按钮。它们在我的桌面浏览器中运行得非常愉快，而且如果我将桌面浏览器窗口的大小调整到移动大小，它们也能正常运行。

但是在移动设备上，当您点击下拉菜单时下拉菜单会打开，但点击下拉菜单中的任何链接只会导致下拉菜单关闭而不点击链接。

这似乎类似于this other SO question，但解决方案是将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>

我在 Mobile Opera、Mobile Firefox 和默认 android 浏览器的 android 手机上对其进行了测试。

【问题讨论】：

标签： javascript jquery mobile twitter-bootstrap

【解决方案1】：

我发现它是 Bootstrap 2.2.1 中的一个错误，changelog for 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>

【讨论】：

【解决方案2】：

我花了很多时间研究 BS 3.0.2 上的这个错误，甚至最初的开发人员似乎也将这个问题作为 iOS 6.1.3 的问题关闭了。至于显示在下一个对象后面的下拉导航，iOS 6.1.3 z-index 出于某种原因被覆盖。因为我非常接近启动我的新网站，所以我不想重新设计它。我通过

中的线型覆盖解决了我的问题

<nav class="navbar navbar-default" role="navigation" style="z-index:1000;">.

这似乎也解决了其他一些问题。由于它已关闭，我无法在此处发布我的解决方案https://github.com/twbs/bootstrap/issues/10027

希望这可以帮助其他人节省一些时间、头痛和头发。

【讨论】：