m1k*_*3y3 1 javascript jquery onclick parent-child toggle
单击"+"时,js/jquery代码会在下面列出切换子项的内容?
<ul>
<li id="1" parent="0"><a href="#">1</a></li>
<li id="2" parent="0"><a href="#"> + </a><a href="#">2</a>
<ul parent="2">
<li id="23" parent="2"><a href="#">2.1</a></li>
<li id="50" parent="2"><a href="#"> + </a><a href="#">2.2</a>
<ul parent="50">
<li id="123" parent="50"><a href="#">2.50.1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
您可以使用.toggle()或.slideToggle()使用.siblings(),如下所示:
$("ul a:contains( + )").click(function() {
$(this).siblings("ul").toggle();
});
Run Code Online (Sandbox Code Playgroud)
你可以在这里测试一下.请注意,虽然您的ID和属性无效,但您可能需要在此处使用data-属性.另外,我建议给这些+链接一个类,使选择多更有效,例如:
<a href="#" class=".toggle"> + </a>
Run Code Online (Sandbox Code Playgroud)
然后像这样绑定:
$("ul a.toggle").click(function() {
$(this).siblings("ul").toggle();
});
Run Code Online (Sandbox Code Playgroud)