2

我有一个嵌套的 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 链接。欢迎所有输入以实现这一目标的最佳方式。

4

3 回答 3

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);
    }
});​
于 2012-06-07T05:57:08.573 回答
1

更简单的一个：

$('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();​​​​​​​

没有折叠同一级别的元素。

在这里。

于 2012-06-07T06:16:33.853 回答
0

虽然我更喜欢其他解决方案，但为了举例，我将提供一条替代路线。我制作了一个 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();
    });
});​
于 2012-06-07T06:28:05.713 回答