jQuery Accordion在点击时更改字体真棒图标类

Question

我有一个关于我发现的简单jQuery手风琴的问题.

我想使用Font Awesome图标来指示带有加号和减号图标的活动/非活动状态.在我的JSFiddle中,您可以看到带有加号图标的手风琴标题.单击标题时,"fa-plus"类需要更改为"fa-minus".

我已经使用add和removeClass做了一些测试,但是我无法让它工作.我真的是一个jQuery/javascript菜鸟!希望你们能帮助我:-).

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/

Answer 1

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

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

更新小提琴

更新:

您的最终代码应如下所示:

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

Updated Fiddle