嵌套 ul 元素上的 jquery 委托展开/折叠功能答案

【问题标题】：jquery delegation on nested ul elements expand/collapse features嵌套 ul 元素上的 jquery 委托展开/折叠功能
【发布时间】：2012-06-07 05:44:55
【问题描述】：

我有一个嵌套的 ul“树”，就这个问题而言，它只有顶部的几个级别和几个孩子，但如果你可以从顶部 ul 假设它（目标为 id="group" 这里) 可能有多个嵌套元素，但它们将始终遵循此结构。目前我只有顶部元素在折叠时折叠它们的子元素 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。欢迎所有意见以最好的方式完成。

【问题讨论】：

标签： jquery slidetoggle nested-lists event-delegation

【解决方案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);
    }
});

【讨论】：

看起来就像我想要的一样

【解决方案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.

【讨论】：

这不会“同时折叠打开的元素‘在同一级别’另一个点击的[元素]”

【解决方案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();
    });
});

【讨论】：