jQuery Basculer Aide

Question

je le code suivant:

$(document).ready(function() { 


    // Manage sidebar category display 
    jQuery("#categories > ul > li.cat-item").each(function(){ 
    var item; 
    if (jQuery(this).has("ul").length) { 
     item = jQuery("<span class='plus'>+</span>").click(function(e){ 
     jQuery(this) 
      .text(jQuery(this).text() === "+" ? "-" : "+") 
      .parent().next().toggle(); 
     return false; 
     }); 

     jQuery(this).find(".children").hide(); 
    } else { 
     item = jQuery("<span class='plus'>&nbsp;</span>"); 
    } 

    jQuery(this).children("a").prepend(item); 
    }); 

}); 

Cela crée une sorte de système à bascule pour mes catégories. Mais cela ne fonctionnera qu'avec 2 niveaux de profondeur, ce dont j'ai besoin c'est de travailler avec des niveaux illimités.

Le code HTML:

<li id="categories"> 
    <ul> 
     <li class="cat-item"><a href="#">Link</a> 
      <ul> 
       <li class="cat-item"><a href="#">Link</a></li> 
       <li class="cat-item"><a href="#">Link</a></li> 
       <li class="cat-item"><a href="#">Link</a></li> 
       <li class="cat-item"><a href="#">Link</a></li> 
      </ul> 
     </li> 
     <li class="cat-item"><a href="#">Link</a> 
      <ul> 
       <li class="cat-item"><a href="#">Link</a></li> 
       <li class="cat-item"><a href="#">Link</a></li> 
       <li class="cat-item"><a href="#">Link</a></li> 
       <li class="cat-item"><a href="#">Link</a> 
        <ul> 
         <li class="cat-item"><a href="#">Link</a></li> 
         <li class="cat-item"><a href="#">Link</a></li> 
         <li class="cat-item"><a href="#">Link</a></li> 
         <li class="cat-item"><a href="#">Link</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</li> 

Answer 1

Votre sélection supérieure est spécifique:

jQuery("#categories li.cat-item").each(function(){ 
    var item = jQuery("<span>").addClass('plus'), 
     that = jQuery(this); 

    if (that.has("ul").length) { 
     item.click(function(e){ 
      var self = jQuery(this); 
      self.text(self.text() === "+" ? "-" : "+") 
       .parent().next().toggle(); 
      e.preventDefault(); 
     }).text('+'); 

     that.find(".children").hide(); 
    } 

    that.children("a").prepend(item); 
}); 

Je change également à mettre en cache $ (this)