jquery: toggle children 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(); 
}); 

You can test it out here. Обратите внимание, что хотя ваши идентификаторы и атрибуты недействительны, вы можете использовать здесь data- attributes. Кроме того, я предлагаю дать те, + ссылки класс, чтобы сделать селектор много более эффективной, например:

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