1

h3をクリックすると、クラスside-nav-block-itemですべてのdivを開閉する必要があるアコーディオンを設定しています(いくつあるかに関係なく)。HTMLの構造を変更することはできません。クラスを追加します。

HTML 構造:

<div class="side-nav">

<div class="side-nav-item">
<h3>Title</h3>
<div class="side-nav-block-item">content</div>
<div class="side-nav-block-item">content</div>
</div>

<div class="side-nav-item">
<h3>Title</h3>
<div class="side-nav-block-item">content</div>
</div>

</div>

Jquery(私の失敗した試み)

    $('.side-nav h3').addClass('on');
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
$('.side-nav h3').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.side-nav h3').removeClass('on');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.side-nav-block-item').slideUp('normal');

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

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

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


 });
4

1 に答える 1