javascript - jQuery Accordion 在点击时更改 Font Awesome 图标类

Question

我有一个关于我找到的简单 jQuery Accordion 的问题。

我想使用 Font Awesome 图标通过加号和减号图标来指示事件/非事件状态。在我的 JSFiddle 中，您会看到带有加号图标的 Accordion 标题。当您单击标题时，“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();

Updated Fiddle

---

更新:

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

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