jQuery手风琴有三个级别

时间:2013-02-05 10:43:04

标签: javascript jquery html

我们已经创建了一个有三个级别的jQuery手风琴。

一切都很顺利,除了当你打开2级物品时,所有其他2级物品都在关闭。我们必须改变什么才能让它在1级项目上受到影响?

我们的HTML标记如下:

<ul>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#">Level 1</a>
        <ul>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
            <li><a href="#">Level 2</a>
                <ul>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                    <li><a href="#">Level 3</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我们的jQuery标记如下:

$this.find("li a").click(function() {
    if($(this).parent().find("ul").size() != 0){
        if(opts.accordion){
            //Do nothing when the list is open
            if(!$(this).parent().find("ul").is(':visible')){
                parents = $(this).parent().parents("ul");
                visible = $this.find("ul:visible");
                visible.each(function(visibleIndex){
                    var close = true;
                    parents.each(function(parentIndex){
                        if(parents[parentIndex] == visible[visibleIndex]){
                            close = false;
                            return false;
                        }
                    });
                    if(close){
                        if($(this).parent().find("ul") != visible[visibleIndex]){
                            $(visible[visibleIndex]).slideUp(opts.speed, function(){
                                $(this).parent("li").find("span:first").html(opts.closedSign);
                            });                                     
                        }
                    }
                });
            }
        }

    $(this).parent().children("ul").slideDown(opts.speed, function(){
        $(this).parent("li").find("span:first").delay(opts.speed).html(opts.openedSign);
    });

    }
});

1 个答案:

答案 0 :(得分:0)

通过更改修复:

parents = $(this).parent().parents("ul");

要:

parents = $(this).parent().parents().children("ul");