jquery - 如何用slideUp和slideDown jquery关闭子菜单

Question

我正在尝试用这种方法关闭子菜单，上下推动id，此时代码slideDown子菜单，推动ID...我想关闭并slideUp ID...任何想法，谢谢提前！

var submenu;    

$('.menu-desktop li').click(function(){
    id = $(this).attr('id');
    $('#intro-home, #breadcrumbs-pc').animate({'margin-top':'2.4rem'}, 100)
    $('.menu-desktop ul:not(:first-child)').slideUp(100)
    $('.menu-desktop').find('.'+id).delay(200).slideDown(100)
    $('#intro-home, #breadcrumbs-pc').delay(200).animate({'margin-top':'5rem'}, 100) 


    $('.menu-desktop').find('.'+id).slideToggle("fast")
});

Answer 1

检查这个 jsFiddle ，看看它是否满足您的需求。

http://jsfiddle.net/droppedonjapan/a66nN/3/

这是肉：

$('.main-menu li').click(function(){
    var elems = $('ul:not(.main-menu)').length;
    var $refClass = $('.' + $(this).attr('data-ref'));
    var visible = $refClass.is(':visible');

    $('ul:not(.main-menu)').slideUp(100, function() {
        if (elems == 1) {
            if (!visible) $refClass.slideDown('fast');
        }
        elems--;
    });
});

我在 slideUp() 函数上使用回调。每次元素完成 slideUp 动画时都会调用它。当最后一个元素完成隐藏时，如果您尝试显示/隐藏的菜单不可见，那么它将显示它。如果它是可见的，则在菜单隐藏后它不会做任何事情。