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

Drop down works strange on mobile device

本文关键字：工作 移动      更新时间：2023-09-26

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

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

有人能帮忙吗？

不确定这是一个问题的原因，但尝试添加以下规则：

.dropdown-backdrop {
  z-index: -1;
}
相关文章：