时间戳

首页 > 解决方案 > 我的类别切换未正确展开

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

问题描述

我想从类别中扩展子项目，它不能完美地检查这里的输出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" );
        });

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

我该如何解决这个问题？

标签： javascriptjquery

解决方案

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

它应该是这样的：

$('.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";
}

推荐阅读