jQuery Sélecteur: Comment sélectionner les enfants de tout cet élément

Question

Donc, j'ai le code qui ressemble à ceci:

<span class="comic_menu mid_menu_title">  
      <ul> 
      <li class="level-0 page_item page-item-264"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=264" title="Ca$h Rulez">Ca$h Rulez</a> 
<ul class='children'> 
    <li class="level-1 page_item page-item-266"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=266" title="1994">1994</a></li> 

    <li class="level-1 page_item page-item-268"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=268" title="1995">1995</a></li> 
    <li class="level-1 page_item page-item-270"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=270" title="1996">1996</a></li> 
    <li class="level-1 page_item page-item-272"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=272" title="1997">1997</a></li> 
    <li class="level-1 page_item page-item-274"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=274" title="1998">1998</a></li> 
    <li class="level-1 page_item page-item-276"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=276" title="1999">1999</a></li> 
    <li class="level-1 page_item page-item-278"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=278" title="2000">2000</a></li> 

    <li class="level-1 page_item page-item-280"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=280" title="2001">2001</a></li> 
</ul> 
</li> 
<li class="level-0 page_item page-item-101"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=101" title="Furlough">Furlough</a> 
<ul class='children'> 
    <li class="level-1 page_item page-item-103"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=103" title="page 66">page 66</a></li> 
    <li class="level-1 page_item page-item-105"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=105" title="page 67">page 67</a></li> 
    <li class="level-1 page_item page-item-107"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=107" title="page 68">page 68</a></li> 

    <li class="level-1 page_item page-item-109"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=109" title="page 69">page 69</a></li> 
    <li class="level-1 page_item page-item-111"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=111" title="page 70">page 70</a></li> 
    <li class="level-1 page_item page-item-113"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=113" title="page 71">page 71</a></li> 
    <li class="level-1 page_item page-item-115"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=115" title="page 72">page 72</a></li> 
    <li class="level-1 page_item page-item-117"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=117" title="page 73">page 73</a></li> 
    <li class="level-1 page_item page-item-119"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=119" title="page 74">page 74</a></li> 

    <li class="level-1 page_item page-item-121"><a href="http://www.domain.com.php5-15.dfw1-1.websitetestlink.com/wordpress/?page_id=121" title="page 75">page 75</a></li> 
</ul> 
</li> 

Il va juste « Menu> niveau 0> enfants> niveau 1 ». J'ai un peu de jQuery qui ressemble à ceci:

$(".level-0 > a").click(function() { 
      $('.level-0 > .children').toggle(); 
      return false; 
     }); 

Je suis sûr que quelqu'un plus intelligent que moi voit le problème: il ouvre onClick élément « enfants » TOUS. Comment puis-je demander à jQuery d'ouvrir l'élément 'children' de JUST l'élément 'level-0' <li> sur lequel je clique?

Désolé pour le désordre. Total n00b et l'aide est très appréciée.

Answer 1

Vous souhaitez utiliser dans $(this) et .siblings() ce cas pour trouver le <ul> relativement, comme ceci:

$(".level-0 > a").click(function() { 
    $(this).siblings('.children').toggle(); 
    return false; 
}); 

You can test it out here, ou ajouter une animation, like this.

$(this) est le jQuery enveloppé version de l'objet en cours, et depuis le <ul class="children"> est un frère du <a> que vous cliquez dessus, .siblings() est ce que vous voulez trouver.