javascript - 我的类别切换未正确展开

Question

我想从类别中扩展子项目，它不能完美工作，请检查此处的输出 https://codepen.io/limon213/pen/GbXaxd

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

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

JavaScript代码是

$('.product-categories li').on('click',function() {
            let i = $(this).index();
            $('.children').eq(i).toggle();
            $( ".cat-parent .icon" ).eq(i).toggleClass( "fa-minus" );
        });

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

如何解决这个问题？

Answer 1

默认情况下，jQuery 选择器应用于整个文档。您可以使用第二个可选参数 described in the documentation 将它们限制为特定元素的后代。 .

它应该是这样的:

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

但是，实际上，我会将大部分样式更改移至 CSS 中，以便 javascript 只需更改一个类:

$('.cat-parent').on('click',function() {
  $(this).toggleClass('open');
});

.cat-item > .children {
  display: none;
}
.cat-item.open > .children {
  display: block;
}
.cat-item.open > .fa-plus:before {
  content: "\f068";
}