Bootstrap 子菜单在打开另一个子菜单时不会关闭上一个子菜单答案

【问题标题】：Bootstrap sub menu doesn't close previous submenu when opening anotherBootstrap 子菜单在打开另一个子菜单时不会关闭上一个子菜单
【发布时间】：2015-10-07 04:42:11
【问题描述】：

我正在使用 Bootstrap 3.1.1 和下拉菜单 - 我已经构建了一个带有子菜单的下拉菜单。每个菜单在点击时打开和关闭，但问题是如果我打开一个子菜单然后打开另一个子菜单，第一个子菜单仍然打开。我希望在打开另一个菜单时关闭任何打开的子菜单。

我将这个用于我的菜单和子菜单：

$(document).ready(function() {
    $('.dropdown-toggle').dropdown();

    $('.dropdown-submenu>a').unbind('click').click(function(e){
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });
});

然后是我的 HTML：

<li class="dropdown" id="menu">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li><a href="/item1">Item 1</a></li>
        <li class="dropdown-submenu"><a href="#" data-toggle="dropdown">Submenu 1</a>
            <ul class="dropdown-menu">
                <li><a class="submenu-open" href="/subitem1">Subitem 1</a></li>
            </ul>
        </li>
    </ul>
</li>

如何在打开另一个菜单时关闭子菜单？

http://jsfiddle.net/ue7cw513/2/

【问题讨论】：

标签： javascript twitter-bootstrap drop-down-menu

【解决方案1】：

我想通了 - 我只是在单击新子菜单时隐藏了所有子菜单：

    $('.dropdown-submenu>ul').hide();

所以现在的代码是：

    $('.dropdown-submenu>a').unbind('click').click(function(e){
        $('.dropdown-submenu>ul').hide();
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });

【讨论】：

【解决方案2】：

您可以在打开所选菜单之前隐藏其他子菜单：

$('.dropdown-submenu>a').unbind('click').click(function(e){
        $('.dropdown-submenu>ul.dropdown-menu').hide();
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });

【讨论】：