jquery：切换子项 onclick

Question

单击“+”时，什么 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>

Answer 1

您可以使用 .toggle() 或 .slideToggle() 与 .siblings()，如下所示：

$("ul a:contains( + )").click(function() {
  $(this).siblings("ul").toggle();
});

您可以在这里测试一下。请注意，尽管您的 ID 和属性无效，但您可能需要使用 data-< /code> 属性 在这里。另外，我建议为这些 + 链接提供一个类，以使选择器更加更加高效，例如：

<a href="#" class=".toggle"> + </a>

然后像这样绑定：

$("ul a.toggle").click(function() {
  $(this).siblings("ul").toggle();
});

Answer 2

像这样的东西

$("ul a:contains('+')").click(function () {
  var $this = $(this);
  $this.siblings("ul").show();
});