javascript - 让第三级子菜单出现在 jquery 中

Question

嗨，我正在尝试使用 jquery 构建菜单，当我单击锚点时，我希望出现一个子菜单，但是当我单击此子菜单中的链接时，我希望出现另一个子菜单。

所以，父母 -> 孩子 -> 孙子

问题是当我点击 Child 时，它会关闭该菜单，而不是进一步扩展。我假设这是因为它读取 Child 并应用相同的 Jquery，即使我不想要它。

http://jsfiddle.net/4AT8C/

$("#pop-out-left ul li > a").click(function () {
$("#pop-out-left ul li")
    .not($(this).parent())
    .removeClass("active");
$(this).parent().toggleClass("active");
});

$("#pop-out-left ul li ul li a").click(function () {
$("#pop-out-left ul li ul li")
    .not($(this).parent())
    .removeClass("active");
$(this).parent().toggleClass("active");
});

html...

<div id="pop-out-left"> 
<ul>
    <li>
        <a>first</a>
        <ul>
            <li>
                <a> second</a>
                <ul>
                    <li>third level</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a>first</a>

        <ul>
            <li>
                <a> second</a>
                    <ul>
                        <li>third level</li>
                    </ul>                    
            </li>
        </ul>
    </li>
    <li>
        <a>first</a>
        <ul>
            <li>
                <a> second</a>
                    <ul>
                        <li>third level</li>
                    </ul>                       
            </li>
        </ul>
    </li>
</ul>

该CSS ...

#pop-out-left > ul > li > a + ul {
display: none;
}
#pop-out-left > ul > li.active > a + ul {
display: block;
}

#pop-out-left > ul > li > a + ul > li > ul {
display: none;
}

#pop-out-left > ul > li > a + ul > li.active > ul {
display: block;
}

Answer 1

你的选择器是错误的。对于第一个，它只是抓住孩子们的任何 ul li 组合。您可以通过多种方式做到这一点。您可能想尝试为每个人分配不同的课程...这是您的代码，但可以正常工作。

$("#pop-out-left > ul > li > a").click(function () {
    $("#pop-out-left > ul > li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});

$("#pop-out-left > ul > li > ul > li > a").click(function () {
    $("#pop-out-left ul > li > ul > li")
        .not($(this).parent())
        .removeClass("active");
    $(this).parent().toggleClass("active");
});

Answer 2

嗯....可能你想要这样的东西：

小提琴

 $("#pop-out-left ul li").click(function () {
   $("> ul",this).show();
   $(this).siblings().removeClass('active').find('ul').hide();
   $(this).addClass('active');
});