Afficher/masquer les éléments enfants dans un bloc de liste imbriqué

Question

Je modifie une vue arborescente de certaines relations que nous avons, j'ai réussi (avec aide) à cocher la case des enfants de lui-même mais ce que je tente de faire faire maintenant est en cliquant sur le plus à côté de chaque parent afficher les niveaux de l'enfant pertinents. De même, si vous cliquez sur le signe moins, les éléments fils doivent être masqués. La liste peut contenir n'importe quel nombre de niveaux.

<ul id="tree"> 
    <li> 
     <a id="sel_11015" class="viewdetails"></a> 
     <input type="checkbox" class="11015" id="11015" value="11015" name="list_data[11015]">&nbsp;A New Client 
    </li> 
    <li> 
     <input type="checkbox" class="11015-21810" id="11015-21810" value="21810" name="list_data[11015-21810]">&nbsp;CSL 
    </li> 
    <li> 
     <a name="sel_11015-11017" class="viewdetails"></a> 
     <ul> 
      <input type="checkbox" class="11015-11017" id="11015-11017" value="11017" name="list_data[11015-11017]">&nbsp;Food Service 
      <li> 
       <input type="checkbox" class="11015-11017-11021" id="11015-11017-11021" value="11021" name="list_data[11015-11017-11021]">&nbsp;Food Service 
      </li> 
      <li> 
       <input type="checkbox" class="11015-11017-11023" id="11015-11017-11023" value="11023" name="list_data[11015-11017-11023]">&nbsp;Heff 
      </li> 
     </ul> 
    </li> 
    <li> 
     <a name="sel_11015-11019" class="viewdetails"></a> 
     <ul> 
      <input type="checkbox" class="11015-11019" id="11015-11019" value="11019" name="list_data[11015-11019]">&nbsp;Spar 
      <li> 
       <input type="checkbox" class="11015-11019-11031" id="11015-11019-11031" value="11031" name="list_data[11015-11019-11031]">&nbsp;Access 10 
      </li> 
      <li> 
       <input type="checkbox" class="11015-11019-27192" id="11015-11019-27192" value="27192" name="list_data[11015-11019-27192]">&nbsp;Apex 2 
      </li> 
      <li> 
       <input type="checkbox" class="11015-11019-12719" id="11015-11019-12719" value="12719" name="list_data[11015-11019-12719]">&nbsp;Recycling Centre 
      </li> 
      <li> 
       <a name="sel_11015-11019-11027" class="viewdetails"></a> 
       <ul> 
        <input type="checkbox" class="11015-11019-11027" id="11015-11019-11027" value="11027" name="list_data[11015-11019-11027]">&nbsp;Spar Ambient 
        <li> 
         <input type="checkbox" class="11015-11019-11027-11037" id="11015-11019-11027-11037" value="11037" name="list_data[11015-11019-11027-11037]">&nbsp;Spar Ambient Warehouse 
        </li> 
       </ul> 
      </li> 
      <li> 
       <input type="checkbox" class="11015-11019-11075" id="11015-11019-11075" value="11075" name="list_data[11015-11019-11075]">&nbsp;Spar Distribution 
      </li> 
     </ul> 
    </li> 
</ul> 

Answer 1

$('a.viewdetails').click(function() { 
    $(this).next('ul').toggle(); 
}); 

essayer. Devrait travailler pour n'importe quel arbre de profondeur. Je suppose que les balises 'a' sont les plus ou les moins.