Question

我正在使用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/

Answer 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();
    });

Answer 2

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

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

Bootstrap子菜单在打开另一个子菜单时不会关闭它

2 个答案: