手风琴打开/关闭电视机

Question

我正在设置一个手风琴，一旦单击h3，就需要打开/关闭类侧导航块项中的所有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');
     } 


 });

Answer 1

如果我理解正确，不需要检查下一个标头是否隐藏，只需检查.side-nav h3是否有.on类。如果是这样的话，删除类和slideUp。如果没有，则添加类和slideDown。

看看这个jsFiddle。它应该能完成你想要的。

$('.side-nav h3').addClass('on');
$('.side-nav h3').click(function() {
    if ($(this).hasClass('on')) {
        // Remove class
        $(this).toggleClass('on');
        // Slide up the siblings of the header that was clicked
        $(this).siblings('.side-nav-block-item').slideUp('normal');
    } else {
        // Add class
        $(this).toggleClass('on');
        // Slide down the siblings of the header that was clicked
        $(this).siblings('.side-nav-block-item').slideDown('normal');
    }
});

更新

下面是一个更新的jsFiddle。