Javascript 我的类别切换未正确展开

我想从类别中展开子项，它无法正常工作。请检查此处的输出

如果与不包含子项存在间隙，则不会跳过正确的项

<ul class="product-categories">
    <li class="cat-item cat-parent"><i class="icon fa fa-plus"></i><a href="#">Parent 1</a>
        <ul class="children">
            <li class="cat-item"><a href="#/">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
        </ul>
    </li>
    <li class="cat-item"><a href="#">Parent 2</a></li>
    <li class="cat-item"><a href="#">Parent 3</a></li>
    <li class="cat-item cat-parent"><i class="icon fa fa-plus"></i><a href="#">Parent 4</a>
        <ul class="children">
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
        </ul>
    </li>
    <li class="cat-item cat-parent"><i class="icon fa fa-plus"></i><a href="#">Parent 5</a>
        <ul class="children">
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
        </ul>
    </li>
    <li class="cat-item cat-parent"><i class="icon fa fa-plus"></i><a href="#">Parent 6</a>
        <ul class="children">
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
        </ul>
    </li>
    <li class="cat-item"><a href="#">Parent 7</a></li>
    <li class="cat-item"><a href="#">Parent 8</a></li>
    <li class="cat-item cat-parent"><i class="icon fa fa-plus"></i><a href="#">Parent 9</a>
        <ul class="children">
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
        </ul>
    </li>
    <li class="cat-item"><a href="#">Parent 10</a></li>
    <li class="cat-item cat-parent"><i class="icon fa fa-plus"></i><a href="#">Parent 11</a>
        <ul class="children">
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
            <li class="cat-item"><a href="#">Child</a></li>
        </ul>
    </li>
</ul>

我认为这是为索引生成的，它没有跳过正确的项

---

如何解决此问题？

默认情况下，jQuery选择器应用于整个文档。您可以使用第二个可选参数将它们约束到特定元素的后代

下面是它的外观：

$('.cat-parent').on('click', function() {
  $('.icon', this).toggleClass('fa-minus');
  $('.children', this).toggle();
}

但是，实际上，我会将大多数样式更改移到CSS中，这样javascript只需更改一个类：

$'.cat parent'。单击，函数{ $this.toggleClass'open'； }; .cat项>.children{ 显示：无； } .cat-item.open>.children{ 显示：块； } .cat-item.open>.fa plus:之前{ 内容：\f068；

---

}非常感谢，事实上，我不是JavaScript方面的专家。我在努力学习：但对我来说太复杂了：我试着看很多教程。

$('.cat-parent').on('click', function() {
  $('.icon', this).toggleClass('fa-minus');
  $('.children', this).toggle();
}