0

ここでこの例を確認してください：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;
    });
});
4

1 に答える 1

0

使用.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/

于 2013-03-17T20:09:50.273 に答える