Wie verschachtelte ul li mit jquery/javascript?

Question

Ich möchte Toggle-Funktion für eine verschachtelte ul geben. In Magento angezeigt ich die Kategorien und Unterkategorien programmatisch in phtml wie unten:

<div class="sidebar-block"> 
    <ul class="cat-list"> 
    <?php foreach ($categories as $category): ?> 
      <li class="category-li"> 
      <div class="main-cat" style="font-weight:bold;"> 
       <?php echo $category->getName()?> </div> 
        <div class="sub-cat" style="display:none;"> 
        <ul class="subcat-list"> 
         <?php foreach ($_subcategories as $_subcategory): ?> 
         <li> 
          <a href="<?php echo $_helper->getCategoryUrl($_subcategory) ?>"> 
           <?php echo $_subcategory->getName() ?> 
          </a> 
         </li> 
         <?php endforeach; ?> 
         </ul> 
       </div> 
      </li> 
<?php endforeach; ?> 
    </ul> 

Ich wünsche dem inneren ul zeigen, wenn die äußere li geklickt wird. Also aktivierte ich die Toggle-Funktion mit jquery unten:

<script> 
var $j = jQuery.noConflict(); 
$j(function() { 
    $j('li.category-li').click(function(){ 
     $j(this).children('ul.subcat-list').toggleClass('active'); 
    }); 
}); 
</script> 

Aber es funktioniert nicht. Bitte helfen Sie mir, die innere ul umzuschalten.

Answer 1

children()

Die .children() Methode von .find unterscheidet() in diesem .children() only travels a single level down the DOM tree, während .find() kann mehrere Ebenen durchqueren bis Nachkomme Elemente (Enkel wählen usw.) auch.

1. So wird das nicht funktionieren wie Ihre ul ein Kind li kein direkter ist.

2. Auch Ihre ul wird immer angezeigt, aber die übergeordnete div ist ausgeblendet. So fügen Sie .active Klasse zum <div class="sub-cat">

   .active{ 
       display : block; 
   } 
   

---

Verwenden jQuery find(),

$j(this).find('div.sub-cat').toggleClass('active'); 

oder

$j('div.sub-cat',this).toggleClass('active');