Bootstrap 3 - 不想双击以关闭下拉菜单

时间:2018-05-12 05:08:59

标签: javascript html twitter-bootstrap

我有一个使用Bootstrap 3创建的导航菜单。菜单有两个下拉列表。这就是我希望它表现的方式:

  • 点击菜单1>出现下拉菜单
  • 点击菜单2>菜单1关闭>出现菜单2下拉列表

以下是实际发生的事情:

  • 点击菜单1>出现下拉菜单
  • 再次点击菜单1将其关闭
  • 点击菜单2将其打开

我尝试了什么:
这里有一个类似的问题: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>

0 个答案:

没有答案