如何在单击时添加活动类并在单击时删除活动类 [英] How to add active class on click and remove active on click

问题描述

我正在用简单的 js 创建手风琴菜单.如何在单击打开/关闭时添加和删除活动类?

<h4 class="mcategory-toggle">车辆</h4><ul class="msub-categories"><li>选项1</li><li>选项2</li><li>选项3</li><h4 class="mcategory-toggle">教育</h4><ul class="msub-categories"><li>选项10</li><li>选项20</li><li>选项30</li><h4 class="mcategory-toggle">商店</h4><ul class="msub-categories"><li>选项 14</li><li>选项 25</li><li>选项 36</li>

a 小提琴

解决方案

您可以使用 toggleClass 方法.

 $(document).ready(function($) {$('.mobile-categories').find('.mcategory-toggle').click(function(){var self = $(this);//展开或折叠此面板self.next().slideToggle('fast');//删除所有元素的活动类，除了当前选定的项目$('.mcategory-toggle').not(self).removeClass('active');//切换当前元素的活动类self.toggleClass('active');//隐藏其他面板$(".msub-categories").not(self.next()).slideUp('fast');});});

你可以看到工作小提琴

I am creating accordian menu with simple js. How can I add and remove active class on click open/close?

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

a fiddle

解决方案

You can use toggleClass method.

  $(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');

                });
      });

You can see Working Fiddle

这篇关于如何在单击时添加活动类并在单击时删除活动类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！