如何使用 jquery/javascript 切换嵌套的 ul li？

Question

我想为嵌套的 ul li 保留 give 切换功能。在 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>

我希望在单击外部 li 时显示内部 ul。所以我使用下面的 jquery 启用了切换功能：

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

但它不起作用。请帮我切换内部 ul。

Answer 1

children()

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree, while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

所以这不会起作用，因为您的 ul 不是 li.[=24= 的直系子代]
另外，你的ul总是显示，但是父div是隐藏的。所以将 .active class 添加到 <div class="sub-cat">
```
.active{
    display : block;
}
```

使用jQueryfind(),

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

或

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

如何使用 jquery/javascript 切换嵌套的 ul li？

How to toggle nested ul li using jquery/javascript?

jquery

toggleclass