我有一个正在处理的家谱，代码是从this codepen获得的。这是标记
<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul>
<li>
<a href="#">Child</a>
<ul>
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
我怎样才能使它只有 Parent会显示，当Parent时会出现其他链接链接被点击？
例如，如果我单击 Parent ，然后是两个Child将显示。如果我单击左侧的“子项”，GrandCHild将会显示，但如果我单击 Child在右边，Grandchild左边的“子”将被隐藏，依此类推。
最佳答案
试试这个:
<head>
<title></title>
<style type="text/css">
.hide {
display: none;
}
.show {
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("a").click(function () {
$("a:contains('Child')").siblings("ul").removeClass();
$("a:contains('Child')").siblings("ul").addClass("hide");
var ul = $(this).siblings("ul");
$(ul).toggleClass("hide", "show");
});
});
</script>
</head>
<body>
<div class="tree">
<ul>
<li>
<a href="#">Parent</a>
<ul class="hide">
<li>
<a href="#">Child</a>
<ul class="hide">
<li>
<a href="#">Grand Child</a>
</li>
</ul>
</li>
<li>
<a href="#">Child</a>
<ul class="hide">
<li><a href="#">Grand Child</a></li>
<li>
<a href="#">Grand Child</a>
<ul class="hide">
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
<li>
<a href="#">Great Grand Child</a>
</li>
</ul>
</li>
<li><a href="#">Grand Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
关于javascript - 单击父列表时如何显示隐藏的列表项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38395093/