如何使手风琴菜单顺序关闭而不是同时打开？

Question

我有一个jQuery插件来生成类似手风琴的菜单。 但是，我的slideUp()和slideDown()函数似乎同时发生。

理想情况下，我希望所有展开的子菜单向上滑动，然后在完成后将所选菜单项的子菜单向下滑动。 我的代码如下：

jQuery.fn.accordionMenu = function() {
    return this.each(function() {
        $('#menu ul').hide(); // hide all unordered lists
        $('#menu li.selected ul').show(); // drop down selected item's sub-menu
        $('#menu li a').click(function() {
            var speed = 'fast';
            var checkElement = $(this).next();
            if (checkElement.is('ul')) {
                if (!checkElement.is(':visible')) {
                    $('#menu ul:visible').slideUp('slow').parent().removeClass('open');
                    checkElement.slideDown('slow').parent().addClass('open');
                }
                return false;
            }
        });
    });
};

提前致谢。

编辑：解决以下问题：

jQuery.fn.accordionMenu = function() {
    return this.each(function() {
        $('#menu ul').hide(); // hide all unordered lists
        $('#menu li.selected ul').show(); // drop down selected item's sub-menu
        $('#menu li a').click(function() {
            var speed = 'fast';
            var checkElement = $(this).next();
            if (checkElement.is('ul')) {
                if (!checkElement.is(':visible')) {
                    $('#menu ul:visible').slideUp(speed, function() {
                        checkElement.slideDown(speed).parent().addClass('open');
                    }).parent().removeClass('open');
                }
                return false;
            }
        });
    });
};

Answer 1

可以使用函数的回调顺序地链接jQuery的动画。 所以举个例子

$("#menu").slideUp("fast", function () {
    $("#menu2").slideUp("fast", function () {
        $("#menu3").slideDown("slow");
    });
});

这个小片段将卷起#menu ，然后卷起#menu2 ，终于滚下来#menu3

查看文档中的一些示例： http : //api.jquery.com/slideUp/

另外，这个问题可能有用： jQuery动画跨多个元素排队

Answer 2

我会在元素上使用动态类来将其标记为展开或折叠。 因此，例如。

$("#menu ul").click( function() {  
  $("#expanded").slideUp( function() {
    $("#expanded").removeClass("expanded");
    $this.slideDown();
    $this.addClass("expanded");
  });
});

因为我没有测试它，所以它可能无法按原样工作，但是它说明了原理。