如何在点击时添加活动类并在点击时移除活动类 [英] How to add active class on click and remove active on click
本文介绍了如何在点击时添加活动类并在点击时移除活动类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在用简单的js创建手风琴菜单。如何在点击打开/关闭时添加和删除活动类?
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 小提琴
推荐答案
您可以使用 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');
});
});
您可以看到 工作小提琴
You can see Working Fiddle
这篇关于如何在点击时添加活动类并在点击时移除活动类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文