Question

我正在处理Bootstrap导航栏的问题，我有多个下拉菜单，但我需要实际的下拉切换为链接，它也适用于桌面，但在移动设备上存在问题，没有悬停我用来显示下拉列表。

例如这个基本菜单：

 <!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="link_to_somewhere" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
    <li><a href="#">Link</a></li>
  </ul>
</div><!-- /.navbar-collapse -->

我正在使用JQuery控制悬停下拉列表。我希望自动在移动设备上显示下拉菜单，这样您就可以点击所有链接。

我使用了stackoverflow

中描述的解决方案

问题在于，如果您在第一个下面有另一个链接或下拉菜单，则第二个链接或下拉菜单覆盖在其上方的下拉菜单中，这样您就无法点击它。

看看这个jsFiddle

当导航栏折叠后，打开它并尝试将鼠标悬停在下拉菜单上，您可以看到下面的链接突出显示。对于某些人来说，底层链接元素会被扩展，我无法摆脱它。

非常感谢任何帮助。

Bootstrap导航栏下拉菜单 - 在移动设备上显示链接

0 个答案: