打开另一个子菜单时关闭打开的子菜单

Question

当我点击打开一个子菜单时，如果已经打开另一个子菜单，它会关闭并打开一个子菜单（以避免一起打开多个子菜单）。找不到办法。这是我的代码：

if( js_local_vars.submenu_slideout == 1 ) {
    jQuery( '.fusion-mobile-nav-holder > ul li' ).each(function() {
        var classes = 'fusion-mobile-nav-item';
        if( jQuery( this ).hasClass( 'current-menu-item' ) || jQuery( this ).hasClass( 'current-menu-parent' ) || jQuery( this ).hasClass( 'current-menu-ancestor' ) || jQuery( this ).hasClass( 'fusion-mobile-current-nav-item' ) ) {
            classes += ' fusion-mobile-current-nav-item';
        }
        jQuery( this ).attr( 'class', classes );
        if( jQuery( this ).find( ' > ul' ).length ) {
            jQuery( this ).prepend( '<span href="#" aria-haspopup="true" class="fusion-open-submenu"></span>' );
            jQuery( this ).find( ' > ul' ).hide();
        }
    });

    jQuery( '.fusion-mobile-nav-holder .fusion-open-submenu' ).click( function(e){
        e.stopPropagation();
        jQuery( this ).parent().children( '.sub-menu' ).slideToggle( 200, 'easeOutQuad' );
    });
}

<div class="fusion-mobile-nav-holder" style="display: block;">
    <ul class="fusion-menu" id="menu-puissance">
        <li class="fusion-mobile-nav-item" id="mobile-menu-item-12036" style=""><a href=""><span class="menu-text">Home</span></a></li>
        <li class="fusion-mobile-nav-item" id="mobile-menu-item-11593" style=""><span class="fusion-open-submenu" aria-haspopup="true" href="#"></span><a href=""><span class="menu-text">Menu1</span></a>
            <ul class="sub-menu" style="display: block;">
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11672" style=""><a href="">Sub-menu1</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11671" style=""><a href="">Sub-menu2</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11670" style=""><a href="">Sub-menu3</a></li>
            </ul>
        </li>
        <li class="fusion-mobile-nav-item" id="mobile-menu-item-11592" style=""><span class="fusion-open-submenu" aria-haspopup="true" href="#"></span><a href=""><span class="menu-text">Menu2</span></a>
            <ul class="sub-menu" style="display: none;">
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11669" style=""><a href="">Sub-menu1</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11668" style=""><a href="">Sub-menu2</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11667" style=""><a href="">Sub-menu3</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11666" style=""><a href="">Sub-menu4</a></li>
            </ul>
        </li>
        <li class="fusion-mobile-nav-item" id="mobile-menu-item-11591" style=""><span class="fusion-open-submenu" aria-haspopup="true" href="#"></span><a href=""><span class="menu-text">Menu3</span></a>
            <ul class="sub-menu" style="display: none;">
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11650" style=""><a href="">Sub-menu1</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11678" style=""><a href="">Sub-menu2</a></li>
	            <li class="fusion-mobile-nav-item" id="mobile-menu-item-11677" style=""><a href="">Sub-menu3</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

尝试关闭所有子菜单，然后再打开单击的

 jQuery( '.fusion-mobile-nav-holder .fusion-open-submenu' ).click( function(e){
        e.stopPropagation();
        $(".sub-menu").css("display","none"); // or close it with animation
        jQuery( this ).parent().children( '.sub-menu' ).css("display","block").slideToggle( 200, 'easeOutQuad' );
    });

也许这个：

jQuery( '.fusion-mobile-nav-holder .fusion-open-submenu' ).click( function(e){
    e.stopPropagation();
    $('.sub-menu').each(function(){
        if ($(this).css("display") == "block") $(this).slideToggle( 200, 'easeOutQuad' );
    });
        jQuery( this ).parent().children( '.sub-menu' ).slideToggle( 200, 'easeOutQuad' );
    });