我正在处理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

折叠导航栏后,打开它并尝试将鼠标悬停在下拉菜单上,您可以看到下面的链接突出显示 . 对于一些reasone底部链接元素扩展,我无法摆脱它 .

任何帮助将非常感激 .