自定义我的jQuery手风琴

Question

当我点击手风琴上的链接时，我想更改背景颜色。

我认为这意味着在点击元素时添加/删除“有效”类。

有人可以用我的代码解释我是如何做到这一点的吗？

Fiddle.

(function($) {
    var allPanels = $('.accordion > dd').hide();
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();
        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();
        return false;
    });
    $('.accordion > dt > a').first().trigger('click');
})(jQuery);

Answer 1

我已经更新了你的jsfiddle：

http://jsfiddle.net/2hmzcgqm/6/

JS代码：

(function($) {
    var allPanels = $('.accordion > dd').hide();
    var allLinks = $('a.heading');
    $('.accordion > dt > a').click(function() {
        allPanels.slideUp();

        //Remove all 
        allLinks.removeClass('active');

        if ($(this).parent().next().is(":visible")) return false;
        $(this).parent().next().slideDown();

        //Add active class
        $(this).addClass('active');

        return false;
    });
    $('.accordion > dt > a').first().trigger('click');
})(jQuery);

CSS代码：

.heading {background:red}
.active {background:black}