如何從多個活動 li 中刪除活動類（多選 li）

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

實際代碼

Answer 1

對於您想要的結果，您只需要toggleClass而不是remove和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>

我希望這將有所幫助。