Question

我创建了一个<ul> <li>列表。当您选择每个<li>时，每个都会有活动的类。现在，我的目标是如何在当前选定的<li>上已经取消活动类的情况下取消选择或删除该活动类。

$('.package_wrap li').click(function() {
    $('.package_wrap li.active').removeClass('active');
    $(this).addClass('active');
});

.active {
    background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="package_wrap">
    <li class="active">foo1</li>
    <li class="active">foo2</li>
    <li class="active">foo3</li>
    <li>foo4</li>
    <li>foo5</li>
</ul>

现在，如果我要取消选择foo3而不删除foo 1和foo2的活动类。我该怎么办？

在这种情况下，它一次只能选择和取消选择一个<li>。我想要的是我可以多选<li>或在其上放置活动类，并可以取消选择一个<li>而不会影响其他<li>。

actual code

Answer 1

对于您想要的结果，您只需要 toggleClass ，而不是删除和 addClass 。

$('.package_wrap li').click(function() {
    $(this).toggleClass('active');
});

.active {
    background-color: lightgreen;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="package_wrap">
    <li class="active">foo1</li>
    <li class="active">foo2</li>
    <li class="active">foo3</li>
    <li>foo4</li>
    <li>foo5</li>
</ul>

我希望这会有所帮助。

如何从多个活动li（multiselect li）中删除活动class

1 个答案: