javascript - 使用 jQuery 在正确的时间关闭子菜单

Question

请看这个 fiddle http://jsfiddle.net/rabelais/ktn425c6/6/

var $menu = $('#menu');

$menu .click(function () {
if ( $('#igna-1').css('display') != 'none' ) {
    $('#igna-1').slideToggle("fast", function() {
        $('#igna-2').animate({ left: 'hide' }, 300, function() {
            $('#black, #igna, #dazed, #sons, #mad, #stimp').slideUp("fast", function() {
                $('#fatal').animate({ left: 'hide' }, 300);
            });
        });   
    });
} else if ( $('#fatal').css('display') == 'none' ) {
    $('#fatal').animate({ left: 'toggle' }, 300, function() {
        $('#igna, #black, #dazed, #sons, #mad,  #stimp').slideToggle("fast");   
    });
} 

1.单击“工作”链接会打开更多链接。

2.单击 DAZED 打开子菜单。

3. 当您再次单击 WORK 时，这两个菜单都打开，这两个菜单同时关闭(这确实发生在我的本地浏览器上，但由于某种原因不在这个 fiddle 上？您可以看到完整的网站 here )

我的问题:我需要先折叠子菜单，然后再折叠第一个菜单，而不是将它们关闭在一起。这种影响确实适用于 IGNA 和 MAD LONDON 子菜单。

请帮忙。谢谢。

Answer 1

我会为你做这样的菜单系统(更改了 html，因此嵌套的子链接在语义上更正确):

$('#menu li').on('click', function(e) {
    e.stopPropagation();
    var li = $(this),
        subMenu = li.children('ul').eq(0);
    
    li.addClass('clicked');
    
    if (subMenu.length) {
        e.preventDefault();
        
        if (subMenu.is(':visible')) {
            closeMenu(subMenu);
        } else {
            li.siblings().children().not(subMenu).children('li').not(':last-child').slideUp('fast', function() {
                $(this).parent().animate({ left: 'hide' }, 300);
            });
            
            subMenu.animate({ left: 'show' }, 300, function() {
                subMenu.children('li').not(':last-child').slideDown('fast');
                console.log('open click removed');
                li.removeClass('clicked');
            });
        }
    }
});

function closeMenu(menu) {
    var subMenu = menu.children('li').children('ul:visible').eq(0);
    if (subMenu.length) {
        closeMenu(subMenu);
    } else {
        var children = menu.children('li').not(':last-child');
        children.each(function(index) {
            if (index == children.length - 1) {
                var parentLi = menu.parent('li');
                $(this).slideUp('fast', function() {
                    menu.animate({ left: 'hide' }, 300, function() {
                        if (parentLi.length && !parentLi.hasClass('clicked')) {
                            console.log(parentLi.hasClass('clicked'));
                            closeMenu(parentLi.parent());
                        } else {
                            parentLi.removeClass('clicked');
                            console.log('close click removed');
                        }
                    });
                });
            } else {
                $(this).slideUp('fast');
            }
        });
    }
}
            

#menu, #menu ul, #menu li {
    list-style:none;
    margin:0;
    padding:0;
}
#menu, #menu ul {
    display:inline-block;
}
#menu {
    position:fixed;
    bottom:34px;
    left:0;
}
#menu ul {
    position:absolute;
    bottom:0;
    display:none;
    z-index:1;
}
#menu li {
    display:block;
    white-space:nowrap;
    position:relative;
}
#menu a {
    position:relative;
    z-index:2;
    background:#ffffff;
}

#menu .level1 {
    left:100px;
}
#menu .level2 {
    left:200px;
}

#menu .level1 li {
    display:none;
}
#menu .level1 li:last-child {
    display:inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
    <li> 
        <a href="#">Work</a>
        <ul class="level1">
            <li class="hidden hover" id="dazed"> 
               <a href="#">Dazed</a>
                <ul class="level2">
                    <li class="hidden hover" id="dazed-1"><a href="#">Dazed<span class="pad">x</span>Amazon</a></li>
                    <li class="hidden hover" id="dazed-2"><a href="#">Dazed Media Re-brand</a></li>
                </ul>
            </li>
            <li class="hidden hover" id="mad"> 
                <a href="#">MAD London</a>
                <ul class="level2">
                    <li class="hidden hover mad" id="mad-1"><a href="#">Apple</a></li>
                    <li class="hidden hover mad" id="mad-2"><a href="#">Every Breaking Wave</a></li>
                    <li class="hidden hover mad" id="mad-3"><a href="#">Films Of Innocence</a></li>
                    <li class="hidden hover mad" id="mad-4"><a href="#">Holiday E-Card</a></li>
                </ul>
            </li>
            <li class="hidden hover" id="sons"><a href="#">Sons<span class="jaap">+</span>Daughters</a></li>
            <li class="hidden hover" id="stimp"><a href="#">STIMPWHTWTIIIF</a></li>
            <li class="hidden hover" id="black"><a href="#">Graham Fan</a></li>
            <li class="hidden hover" id="igna"> 
                <a href="#">Inga Nemirovskaia</a>
                <ul class="level2">
                    <li class="hidden hover" id="igna-1"><a href="#">S/S <span id="ss">15</span></a></li>
                    <li class="hidden hover" id="igna-2"><a href="#">A/W 14</a></li>
                </ul>
            </li>
            <li class="hidden hover" id="fatal"><a href="#">Vincenzo Laera</a></li>
        </ul>
    </li>
</ul>