Как переключить вложенные ul li с помощью jquery/javascript?

Question

Я хочу сохранить функцию переключения для вложенной ul li. В Magento я показал категории и ее подкатегорий в PHTML программно, как показано ниже:

<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> 

Я хочу, чтобы показать внутреннюю ul, когда внешний li щелкают. Поэтому я включил функцию переключения, используя jquery ниже:

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

Но он не работает. Пожалуйста, помогите мне переключить внутреннюю улицу.

Answer 1

children()

The .children() метод отличается от .find() в этом .children() only travels a single level down the DOM tree, в то время как .find() может пройти вниз несколько уровней для выбора элементов-потомков (внуков и т.д.) также.

1. Так что это не будет работать, как ваш ul не является прямым потомком li.

2. Также отображается ваш ul, но родительский div скрыт. Так добавить .active класс к <div class="sub-cat">

   .active{ 
       display : block; 
   } 
   

---

Использование JQuery find(),

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

или

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