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 animation queues across multiple elements

Answer 2

我会在元素上使用动态类来标记它们被展开或折叠。所以，例如。

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

这可能不会逐字逐句，因为我没有测试它，但它显示了原则。

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

2 个答案: