下拉在移动设备上的工作很奇怪答案

【问题标题】：Drop down works strange on mobile device下拉在移动设备上的工作很奇怪
【发布时间】：2015-03-06 21:01:14
【问题描述】：

我正在使用 Bootstrap 构建this 网站，其中“项目”下有一个下拉菜单，在台式电脑上运行良好，但在移动设备上它是这样的：按钮在触摸时打开，也是如此菜单“项目”，但是当点击其中一个子菜单项时，它什么也不做，只有第二次点击最终会打开所需的子菜单项。这意味着，您必须单击两次才能打开一个烦人的子菜单链接。

这是 HTML 代码：

    <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav nav-pills nav-stacked">     
   <li class="dropdown">
      <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">PROJECTS</a>
        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
          <li><a href="#napoli" tabindex="-1" data-toggle="tab">NAPOLI</a></li>
          <li><a href="#portraits" tabindex="-1" data-toggle="tab">PORTRAITS</a></li>
        </ul>
    </li> 
    <li><a href="#bio" data-toggle="tab">BIO</a></li> 
    <li><a href="#contact" data-toggle="tab">CONTACT</a></li>
    <li><a href="#blablabla" data-toggle="tab">BLABLABLA</a></li>
  </ul>
</div>

有人可以帮忙吗？

【问题讨论】：

我什至无法在移动设备上看到您的菜单，因为 #myNavbar 在小屏幕上得到 display:noned。此外，您应该发布您的源代码，因为您的网站可能会发生变化，而未来寻找相同问题解决方案的人将无法看到源代码。
@szupie 我更新了问题。该站点正在使用引导程序构建，这意味着菜单mynavbar 将折叠在小型设备上的按钮上。因此，您应该在屏幕右侧靠近网站标题的地方看到一个三行按钮。如果你点击它，菜单就会打开。你看到了吗？
我现在“看到”了。菜单按钮在白色背景上是白色的，因此不可见。它在 Firefox 36 Android 上运行良好。一键打开菜单项。你用的是什么浏览器？
我使用 Android 并在 Firefox 和默认浏览器上都试过了，我可以看到右边的三个条纹（我实际上是用 CSS 设计的）。无论如何，当您单击“项目”然后想要单击“那不勒斯”或“肖像”时会发生什么？
奇怪，我现在可以看到菜单按钮了。将来，您应该发布重现您遇到的问题所需的最少代码；您发布的 HTML 代码本身不足以生成“工作”版本。在移动设备上调试实时网站而无法更改代码是一件很痛苦的事情。

标签： javascript android html twitter-bootstrap touchscreen

【解决方案1】：

不知道为什么这是一个问题，但请尝试添加此规则：

.dropdown-backdrop {
  z-index: -1;
}

【讨论】：