嵌套 ul 元素上的 jquery 委托(delegate)展开/折叠功能

Question

我有一个嵌套的 ul“树”，为了这个问题，它只有顶部的几层和几个子节点，但是如果你可以假设从顶部 ul (以 id 为目标) ="group" 此处)可能有多个嵌套元素，但它们将始终遵循此结构。目前，我只有顶部元素在折叠时折叠其子 ul 元素。我想在所有 ul 元素中实现这种性质。此外，我还想折叠与另一个单击的“同一级别”的打开元素，以便只有一个 ul 与另一个 ul 处于打开状态。我希望我已经解释了我想要实现的功能。我觉得我应该使用 slideToggle() 但每次尝试都以失败告终...我还应该说，这是我实际使用 delegate() 的第一手资料> 但我理解传播(“事件冒泡”)，这也是我觉得这是完成此类任务的方法的部分原因。另一个是我可能需要将新元素附加到 ul 中。这就是我目前所拥有的:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('ul#group').delegate('a', 'click', function(event) {
            if($(event.target).next().is(':visible')) {
                if($(event.target).next()) {
                    $(event.target).next().find('ul').slideUp(250, function() {
                        $(event.target).next().slideUp(250);
                    });
                }
            } else {
                $(event.target).next().slideDown(250);
            }
        });
    });
</script>
<ul id="group">
    <li>
        <a href="#" onclick="return false;">Foo Bar 1</a>
        <ul>
            <li>
                <a href="#" onclick="return false;">Foo 1</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Bar 1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="return false;">Foo 2</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Bar 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#" onclick="return false;">Bar Foo 2</a>
        <ul>
            <li>
                <a href="#" onclick="return false;">Bar 1</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Foo 1</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#" onclick="return false;">Bar 2</a>
                <ul>
                    <li>
                        <a href="#" onclick="return false;">Foo 2</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这是一个 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);
    }
});​