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

Question

我有一个使用 Bootstrap 3 创建的导航菜单。该菜单有两个下拉菜单。这是我希望它的行为方式：

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

以下是实际发生的情况：

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

我尝试过的：
这里有一个类似的问题：避免双击来切换 Bootstrap 下拉菜单。这些解决方案似乎特定于使用 Angular 和 bootstrap，但我还是尝试了它们。这是发生的事情：

一个解决方案提到摆脱 bootstrap.min.js。该解决方案适用于 Bootstrap 4。

第二个解决方案包括以这种方式停止下拉列表的默认行为：

$('.dropdown-toggle').click(function(e) {
    e.preventDefault();
    e.stopPropagation();

    return false;
});

但是如果我添加它，下拉菜单根本不起作用。当我点击它们时，什么也没有发生。

我尝试的最后一个解决方案包括删除

data-toggle="dropdown"

。这导致下拉菜单根本不显示。

问题：
有谁有解决方案如何删除双击功能，以便我不必双击关闭一个菜单才能打开另一个菜单？我只是使用 Bootstrap （不是 Angular 和 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>

Answer 1

你可以尝试一下，我发现它可以解决我的问题：

$('.dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});
$('body').on('click', function (e) {
    if (!$('.dropdown').is(e.target) 
        && $('.dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('.dropdown').removeClass('open');
    }
});

这是如何解决它的答案：https://stackoverflow.com/a/25196101/15069798