JQuery - Удалить класс

Question

Я уже внимательно посмотрел на поиск, но не смог найти конкретное решение для моей проблемы. У меня есть код последующие:

$('.filter li a').on('click', function(event){ 
    event.preventDefault(); 
    var $self = $(this); 
    var $this = $(this).parent(); 

    if($this.hasClass('active')) { 
     return; 
    } 

    $self.closest('ul').children().removeClass('active'); 
    $self.parent().addClass('active'); 

    $container.shuffle('shuffle', $this.data('group')); 
}); 

Я хочу сейчас, чтобы удалить эту строку:

$self.closest('ul').children().removeClass('active'); 

Цель должна быть, что я могу выбрать несколько элементов, а не только один с классом «активным». Любые идеи?

Большое спасибо.

Чтобы быть более ясным здесь небольшое изображение, как выглядит меню:

Посетитель приходит на страницу и точки «Показать все» отмечен. Noe он должен быть в состоянии выбрать из четырех вариантов «A3, A4, Farbe, S/W». С текущим кодом вы можете выбрать один одновременно. Но я должен был бы иметь возможность выбирать больше в одно и то же время.

А вот HTML код:

<div class="filter"> 
     <ul> 
      <li class="active" data-group="all"><a href="#">Show All</a></li> 
             <li data-group="a3" class=""><a href="#">A3</a></li> 
               <li data-group="a4" class=""><a href="#">A4</a></li> 
               <li data-group="farbe" class=""><a href="#">Farbe</a></li> 
               <li data-group="s-w" class=""><a href="#">S/W</a></li> 
           </ul> 
    </div> 

Добавлено 17/03/2016: Есть 5 пунктов меню. Первый - «Показать все». При нажатии одной из 4-х точек (A3, A4, Farbe, S/W) первый (Показать все) должен потерять класс «активный», а один новый щелчок должен получить класс «активен». Если снова нажать «Показать все», только этот пункт меню должен иметь класс «активный».

Каждый пункт меню имеет также группу данных. Точка «Show-All» имеет группу данных = «все». Поэтому, если щелкнуть эту точку меню, должна быть активна только эта группа данных. Если нажата кнопка меню «A3», группа данных = «A3» должна быть активной. Если также нажать «А4», то и эта группа данных должна быть активной. Точно так же, если нажать «А4» снова, следует удалить класс = «активный», а также группу данных = «А4». При повторном нажатии «Показать все» все группы данных должны быть удалены, и только группа данных = «все» должна быть активной.

Answer 1

Пользователь «обычно» ожидает несколько записей, которые будут выбраны, когда они, удерживая нажатой клавишу сдвиг, так что вы могли бы изменить эту строку так:

if (!event.shiftKey) { 
    $self.closest('ul').children().removeClass('active'); 
} 

Так что теперь вы будете еще выбрать один элемент в время, пока вы не удерживаете клавишу Shift.

Answer 2

Итак, если вы не хотите удалять все классы, чем просто переключать его на текущее нажатие.

$('.filter li a').on('click', function(event) { 
 
    $(this).parent().toggleClass("active"); 
 
});

.active { background-color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter"> 
 
    <ul> 
 
    <li class="active" data-group="all"><a href="#">Show All</a></li> 
 
    <li data-group="a3" class=""><a href="#">A3</a></li> 
 
    <li data-group="a4" class=""><a href="#">A4</a></li> 
 
    <li data-group="farbe" class=""><a href="#">Farbe</a></li> 
 
    <li data-group="s-w" class=""><a href="#">S/W</a></li> 
 
    </ul> 
 
</div>