javascript - スライドダウンコンテンツ

Question

スライドダウン メニュー コンテンツの作業コードがあります。

ただし、ボタンをクリックしたときにホバー状態と同じアクティブを維持し、クリックして閉じるとオフにするのに問題があります。

これが私の作業例です。

// IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if($(this).next().is(':hidden') == true) {
    // ADD THE ON CLASS TO THE BUTTON
    $(this).addClass('on');

    // OPEN THE SLIDE
    $(this).next().slideDown('normal');
}

Answer 1

これが私の解決策です。

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.accordionButton').removeClass('on');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        var self = this;
        $(this).next().slideToggle('normal', function() {
             $(self).toggleClass('on', $(this).is(':visible'));                                   
        });
     });

デモを試す

Answer 2

試す

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.accordionButton').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').not(this).removeClass('on');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

        //ADD THE ON CLASS TO THE BUTTON
        $(this).addClass('on');

        //OPEN THE SLIDE
        $(this).next().slideDown('normal');
    }

});

デモ:フィドル