我有一个使用Bootstrap 3创建的导航菜单。菜单有两个下拉列表。这就是我希望它表现的方式:
以下是实际发生的事情:
我尝试了什么:
这里有一个类似的问题:Avoid having to double-click to toggle Bootstrap dropdown。解决方案似乎特别使用角度与引导程序,但我还是尝试了它们。发生了什么:
一个解决方案提到摆脱bootstrap.min.js。该解决方案适用于Bootstrap 4.
第二种解决方案包括以这种方式停止下拉列表的默认行为:
$('.dropdown-toggle').click(function(e) {
e.preventDefault();
e.stopPropagation();
return false;
});
但如果我补充说,下拉列表根本不起作用。当我点击它们时,没有任何反应。
我尝试的最后一个解决方案包括删除data-toggle="dropdown"
。这导致了下降也没有显示出来。
问题:
有没有人有一个解决方案如何删除双击功能,以便我不必双击关闭一个菜单,然后才能打开另一个菜单?我只是使用Bootstrap(不是角度和引导程序),我使用的是Bootstrap 3。
我的代码:
不知道这是否有用,但这是我的导航条形码:
<nav>
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Option 1<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option1menu">
<li><a href="link.php">Link</a></li>
<li><a href="link.php">Link</a></li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" >Option 2<span class="caret"></span></a>
<ul class="dropdown-menu" style="position:relative;width:100%;" id="option2menu">
<li><a href="link.php">Link</a></li>
<li><a href="link.php">Link</a></li>
</ul>
</li>
</ul>
</nav>