我正在处理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底部链接元素扩展,我无法摆脱它 .
任何帮助将非常感激 .