jQuery Accordion 在单击时更改字体真棒图标类 [英] jQuery Accordion change font awesome icon class on click
问题描述
我有一个关于我找到的简单 jQuery 手风琴的问题.
I have a question about a simple jQuery accordion I found.
我想使用 Font Awesome 图标来用加号和减号图标指示活动/非活动状态.在我的 JSFiddle 中,您会看到带有加号图标的手风琴标题.当您点击标题时,fa-plus"类需要更改为fa-minus".
I'd like to use Font Awesome icons to indicate the active/inactive state with plus and minus icons. In my JSFiddle you see the accordion titles with plus icons. When you click on a title the "fa-plus" class needs to change to "fa-minus".
我已经用 add 和 removeClass 做了一些测试,但我无法让它工作.我真的是一个 jQuery/javascript 菜鸟!希望你们能帮助我:-).
I already did some tests with add and removeClass, but I couldn't get it working. I'm really a jQuery/javascript noob! Hope you guys can help me out :-).
jQuery('.accordion dt').click(function() {
jQuery('.accordion dt').removeClass('active');
jQuery('.accordion_content').slideUp('normal');
if(jQuery(this).next().is(':hidden') == true) {
jQuery(this).addClass('active');
jQuery(this).next().slideDown('normal');
}
});
jQuery('.accordion_content').hide();
推荐答案
为什么不链接你的代码而不是重复你自己:
Why not chain your code instead of repeat yourself:
jQuery('.accordion dt').click(function() {
jQuery(this).find('i').toggleClass('fa-plus fa-minus')
.closest('dt').next().slideToggle()
.siblings('.accordion_content').slideUp();
});
jQuery('.accordion_content').hide();
更新:
您的最终代码应如下所示:
Your final code should look like this:
jQuery('.accordion dt').click(function() {
jQuery(this).toggleClass('active').find('i').toggleClass('fa-plus fa-minus')
.closest('dt').siblings('dt')
.removeClass('active').find('i')
.removeClass('fa-minus').addClass('fa-plus');
jQuery(this).next('.accordion_content').slideToggle()
.siblings('.accordion_content').slideUp();
});
jQuery('.accordion_content').hide();
这篇关于jQuery Accordion 在单击时更改字体真棒图标类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!