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";
}

我的类别切换未正确展开

1 个答案: