jquery: bascule enfants onclick

Question

ce que le code js/jquery ferait en dessous de la liste bascule les enfants en cliquant sur "+"?

<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

Vous pouvez utiliser .toggle() ou .slideToggle() avec .siblings(), comme ceci:

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

You can test it out here. Notez bien que vos ID et attributs ne sont pas valides, vous pouvez utiliser data- attributes ici. Aussi, je suggère de donner ces + liens une classe, pour faire le sélecteur beaucoup plus efficace, par exemple:

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

liant ensuite comme ceci:

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

Answer 2

Quelque chose comme ça

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