如何从多个活动 li 中删除活动类（多选 li）

Question

I created an <ul> <li> list. When you select each <li> , there will be active classes each. Now, my goal is how to deselect or remove the active class on the current selected <li> if it has active class already.

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

Now, if I want to deselect foo3 without removing the active class of foo 1 and foo2 . How can I do it?

In this event, it only select and deselect one <li> at a time. What I want is that I can multi select <li> or put active classes on them and can deselect one <li> without affecting other <li> .

actual code

Answer 1

For you desire result you just need toggleClass instead of remove and 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>

I hope this will help.