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

Question

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

所以，父 -> 子 -> 孙

问题是当我点击 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

您的选择器是错误的。对于第一个，它只是捕获 children 的任何 ul li 组合。你可以通过多种方式做到这一点。您可能想尝试给每个人一个不同的类(class)...这是您的代码，但可以正常工作。

$("#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");
});