Question

我想为嵌套的ul li保持to toggle功能。在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>

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

Answer 1

<强> children()

.children（）方法与。.children() only travels a single level down the DOM tree，中的.find（）不同，而.find（）可以遍历多个级别以选择后代元素（孙子等）同样。

所以这不会起作用，因为 ul不是li 的直接孩子。
此外，您的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');

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

1 个答案: