Как добавить активный класс при нажатии и удалении активного при нажатии

Question

Я создаю гармоничное меню с помощью простых js. Как я могу добавить и удалить активный класс при нажатии кнопки «открыть/закрыть»?

<div class="mobile-categories"> 
    <h4 class="mcategory-toggle">Vehicles</h4> 
    <ul class="msub-categories"> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    <h4 class="mcategory-toggle">Education</h4> 
    <ul class="msub-categories"> 
     <li>Option 10</li> 
     <li>Option 20</li> 
     <li>Option 30</li> 
    </ul> 
    <h4 class="mcategory-toggle">Shops</h4> 
    <ul class="msub-categories"> 
     <li>Option 14</li> 
     <li>Option 25</li> 
     <li>Option 36</li> 
    </ul> 
</div> 

fiddle

Answer 1

Вы можете использовать toggleClass метод.

$(document).ready(function($) { 
       $('.mobile-categories').find('.mcategory-toggle').click(function(){ 

      var self = $(this); 

      //Expand or collapse this panel 
      self.next().slideToggle('fast'); 

      //Remove active class for all element, except the current selected item 
      $('.mcategory-toggle').not(self).removeClass('active'); 

      //Toggle active class for the current element 
      self.toggleClass('active'); 

        //Hide the other panels 
      $(".msub-categories").not(self.next()).slideUp('fast'); 

       }); 
     }); 

Вы можете увидеть Working Fiddle

Answer 2

Добавить JQuery метод класса тумблер к вашей функции мыши:

$(this).toggleClass('active');