jQuery Accordion 在单击时更改字体真棒图标类 [英] jQuery Accordion change font awesome icon class on click

查看:26
本文介绍了jQuery Accordion 在单击时更改字体真棒图标类的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个关于我找到的简单 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();

http://jsfiddle.net/XrGU8/

推荐答案

为什么不链接你的代码而不是重复你自己:

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆