启动子菜单打开另一个子菜单时不会关闭前一个子菜单

Bootstrap sub menu doesn't close previous submenu when opening another

本文关键字：菜单 一个 另一个 启动      更新时间：2023-09-26

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

我明白了-我只是隐藏了所有的子菜单ul点击一个新的子菜单:

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

所以现在的代码是:

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

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

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