如何在单击时添加活动 class 并在单击时删除活动

Question

我正在用简单的 js 创建手风琴菜单。如何在点击 open/close 时添加和删除活动 class？

<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

将 jQuery 切换 class 方法添加到您的点击功能：

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

Answer 2

您可以使用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 3

单击使用 jQuery

添加删除 class

$(document).ready(function(){
$('.btn').on('click',function(){
      if($('.box').hasClass('current')){
        $('.box').removeClass('current');
      }else{
        $('.box').addClass('current');
      }
   });
 });

如何在单击时添加活动 class 并在单击时删除活动

How to add active class on click and remove active on click

javascript

accordion