Question

我有一个嵌套的ul“树”，为了这个问题，在顶部和几个孩子只有几个级别，但是如果你可以假设从顶部ul（以{{1}为目标这里可能有几个嵌套元素，但它们将始终遵循这个结构。目前我只有顶级元素折叠他们的孩子ul元素崩溃。我希望在所有ul元素中实现这种性质。此外，我还想折叠另一个点击的“处于同一级别”的开放元素，这样只有一个ul与另一个打开。我希望我已经解释了我想要完成的功能。我觉得我应该使用id="group"但是每次使用它的结果都很糟糕......我还应该说这是我实际使用slideToggle()的第一手资料但是我理解传播（“事件冒泡” “）并且是我觉得这是完成这项任务的方式的部分原因。另一个是我可能需要在ul中添加新元素。所以这就是我目前所拥有的：

delegate()

这是测试用例的jsfiddle link。欢迎所有输入以最佳方式完成。

Answer 1

这就是你所追求的：http://jsfiddle.net/GSEDy/3/

我做了一些修改。

$('ul#group').delegate('a', 'click', function(event) {
    if ($(event.target).next().is(':visible')) {
        $(event.target).next().find('ul').slideUp(250, function() {
            $(event.target).next().slideUp(250);
        });
    } else {
        $(event.target).parent().siblings().find("ul").slideUp(250);
        $(event.target).next().slideDown(250);
    }
});

Answer 2

更简单：

$('ul#group').delegate('a', 'click', function(event) {
  $(this).parent().children('ul').slideToggle(250);  
});
// At beginning hide elements preferably with css
$('ul#group').find('ul').hide();

不要在同一级别折叠元素。

Here it is

Answer 3

虽然我更喜欢其他解决方案，但我会提供另一种方法，例如。我制作了一个jQuery插件，它创建了一个clickOut伪事件，我在其中使用了缩小版本。这样做的好处是用户可以在菜单外单击，菜单将崩溃。 http://jsfiddle.net/GSEDy/7/

$('#group li').click(function (event) {
    'use strict';
    $(this).children('ul').slideToggle(250, function () {
        $(this).find('ul').hide();
    });
    $(this).siblings().children('ul').each(function () {
        $(this).slideUp(250, function () {
            $(this).find('ul').hide();
        });
    });
    event.stopPropagation();
}).clickOut(function () {
    'use strict';
    $(this).children('ul').slideUp(250, function () {
        $(this).find('ul').hide();
    });
});

嵌套ul元素的jquery委托扩展/折叠功能

3 个答案: