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

Question

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

这里是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>

有人可以帮忙吗？

Answer 1

不确定为什么会出现这个问题，但请尝试添加此规则：

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

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

Drop down works strange on mobile device

html

javascript

android

touchscreen

twitter-bootstrap