Question

我有一个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>

我在移动Opera，移动Firefox和默认Android浏览器的Android手机上测试过它。

enter image description here

Answer 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>

Answer 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;">。

这似乎也解决了其他一些问题。由于它已关闭，我无法在此处{@ 3}}

发布我的解决方案

希望这可以帮助别人节省一些时间，头疼和头发。

Twitter Bootstrap（v2.2.1）下拉链接无法在移动设备上运行

2 个答案: