jquery - 如何向简单的 jQuery 手风琴添加样式/css？

Question

请在此处查看此示例：http: //jsfiddle.net/v5eV3/

我想知道如何为该手风琴添加风格，尤其是当它处于活动状态时。

在悬停时我管理，但问题是它何时处于活动状态。

jQuery代码：

$(document).ready(function() {
    var cur_stus;

    //close all on default
    $('#accordion dd').hide();
    $('#accordion dt').attr('stus', '');

    //open default data
    $('#accordion dd:eq(0)').slideDown();
    $('#accordion dt:eq(0)').attr('stus', 'active');

    $('#accordion dt').click(function(){
        cur_stus = $(this).attr('stus');
        if(cur_stus != "active")
        {
            //reset everthing - content and attribute
            $('#accordion dd').slideUp();
            $('#accordion dt').attr('stus', '');

            //then open the clicked data
            $(this).next().slideDown();
            $(this).attr('stus', 'active');
        }
        //Remove else part if do not want to close the current opened data
        else
        {
            $(this).next().slideUp();
            $(this).attr('stus', '');
        }
        return false;
    });
});

Answer 1

使用.addClass()和.removeClass()jQuery函数：

$(document).ready(function() {
    var cur_stus;

    //close all on default
    $('#accordion dd').hide();
    $('#accordion dt').attr('stus', '');

    //open default data
    $('#accordion dd:eq(0)').slideDown();
    $('#accordion dt:eq(0)').attr('stus', 'active');
    $('#accordion dt:eq(0)').addClass('active');

    $('#accordion dt').click(function(){
        cur_stus = $(this).attr('stus');
        if(cur_stus != "active")
        {
            //reset everthing - content and attribute
            $('#accordion dd').slideUp();
            $('#accordion dt').attr('stus', '');
            $('#accordion dt').removeClass('active');

            //then open the clicked data
            $(this).next().slideDown();
            $(this).attr('stus', 'active');
            $(this).addClass('active');
        }
        //Remove else part if do not want to close the current opened data
        else
        {
            $(this).next().slideUp();
            $(this).attr('stus', '');
                    $(this).removeClass('active');
        }
        return false;
    });
});

工作演示：http: //jsfiddle.net/v5eV3/2/