引导选项卡下拉菜单在移动设备上不起作用答案

【问题标题】：Bootstrap Tabs Drop-Down Not Working on Mobile引导选项卡下拉菜单在移动设备上不起作用
【发布时间】：2012-11-16 03:54:52
【问题描述】：

更新事实证明这是一个已知问题 - 它根本不会出现在 Stack Overflow 上的任何搜索中。希望这篇文章能引起人们对这个问题的关注。

本质上，Twitter Bootstrap 2.2.1 仍然存在标签下拉功能在移动设备上正常工作的问题。

事实上，在某些 Android 和 iOS 版本上查看时，即使他们自己在上述链接上的文档也无法正常工作。要在您的设备上进行测试，请尝试使用此处的下拉菜单：http://twitter.github.com/bootstrap/javascript.html#tabs

有关此问题的更多解决方案和进展，请参阅 Twitter Bootstrap Github 存储库以获取更多详细信息：https://github.com/twitter/bootstrap/issues/4550

/////////////////////////////////////// /////////////////////

使用带有标准文档的 Twitter Bootstrap 2.2.1 样板文件（css、js）我无法在移动设备上使用下拉选项卡（在 Android 4.1 的浏览器和 Chrome 中测试）

代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">    
    <script src="./js/jquery-1.8.2.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script>
    $('#myTab a').click(function (e) {e.preventDefault();
  $(this).tab('show');
})
</script>
  </head>
<body>
<div class="row">
  <div class="span12">
     <ul id="myTab" class="nav nav-tabs">
              <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
              <li><a href="#profile" data-toggle="tab">Profile</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b     class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#dropdown1" data-toggle="tab">@fat</a></li>
                  <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
                </ul>
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div class="tab-pane fade in active" id="home">
                <p>Raw</p>
              </div>
              <div class="tab-pane fade" id="profile">
                <p>Food</p>
              </div>
              <div class="tab-pane fade" id="dropdown1">
                <p>Etsy</p>
              </div>
              <div class="tab-pane fade" id="dropdown2">
                <p>Trust</p>
              </div>
            </div>
          </div>
        </div>
   </body>
</html>

有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap

【解决方案1】：

Bootstrap 2.2.2 已修复此问题

https://github.com/twbs/bootstrap/wiki/Changelog

【讨论】：

无论如何，Android 下拉列表不适合我，使用 Bootstrap 2.3.1。

【解决方案2】：

如果您正在谈论带有 @fat 和 @mdo 选项的下拉菜单，那么您需要更改您的设计..因为即使您让它在移动设备上工作，那么它对您来说也不会是一个舒适的体验用户..

this link 可能会帮助您重新考虑您正在尝试的移动设计。..

您也可以考虑在没有下拉菜单的情况下合并更多选项卡，或者可以使用按钮或链接，根据您的要求选择最适合的选项。

【讨论】：

感谢您的回复 Rishi。我知道最好先向用户说明哪些选项，但是我正在构建的有 3 个类别（汽车品牌），用户可以从中选择其中 1 个类别单独有 14 个选项（汽车模型）。我不希望用户导航到每个新页面，而是这是一个比较工具。也就是说，下拉菜单会加快流程，并有更好的用户体验（在我看来）。事实证明，我收到的错误是一个已知问题，并已在 Github 存储库中提交：github.com/twitter/bootstrap/issues/4550
在 github 链接上，您可以找到一些解决方法 - $('a.dropdown-toggle, .dropdown-menu a').on('touchstart', function(e) { e.stopPropagation(); }); 是其中之一，并且适用于许多用户..检查它是否也适用于您..$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); }); 是另一种解决方法..跨度>