5

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

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

这似乎与其他 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 手机上对其进行了测试。

在此处输入图像描述

4

2 回答 2

8

我已将其追踪到 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>
于 2013-01-26T17:44:59.227 回答
0

我花了很多时间研究 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

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

于 2014-01-30T19:08:41.940 回答