您好,我正在尝试使用 jquery 构建一个菜单,当我点击一个 anchor 时,我希望出现一个子菜单,但是当我点击该子菜单中的一个链接时,我希望出现另一个子菜单。
所以,父 -> 子 -> 孙
问题是当我点击 Child 时,它关闭了那个菜单而不是进一步扩展。 我假设这是因为它读取 Child 并应用相同的 Jquery,即使我不希望它这样做。
$("#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;
}
最佳答案
您的选择器是错误的。对于第一个,它只是捕获 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");
});
关于javascript - 让第三级子菜单出现在 jquery 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15293425/