Jquery 手风琴打开/关闭div

我正在设置一个手风琴，一旦单击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>

---

如果我理解正确，无需检查下一个标题是否隐藏，只需检查

.side nav h3

是否有class

.on

。如果确实如此，请删除该类并滑动到

slideUp

。如果没有，则添加类并向下滑动

看看这个。它应该实现你想要的

$('.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');
    }
});

更新

这是一个更新的标题。
如果我理解正确，无需检查下一个标题是否隐藏，只需检查
。侧面导航h3
是否有类
。
。如果确实如此，请删除该类并滑动到
slideUp
。如果没有，则添加类并向下滑动

看看这个。它应该实现你想要的

$('.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');
    }
});

更新

这是一个更新版。
您正试图使其无论单击什么标题，每个“内容”部分都会关闭？不仅仅是h3是侧导航中的侧导航块项目类。查看我发布的JSFIDLE，我认为这是您试图实现的目标。如果没有，请让我知道我误解了什么。你是在尝试这样做，无论你点击什么标题，每个“内容”部分都会关闭？不仅仅是h3是侧导航中的侧导航块项目类。查看我发布的jsFiddle，我认为这是你试图完成的。如果没有，请让我知道我误解了什么。谢谢你，这给了我一个很好的方法。它正在关闭所有“侧导航块项目”，而我需要它只打开/关闭与单击的h3相同的“侧导航项目”内的项目。@sarah3585请查看我的更新。我添加了一个新的JSFIDLE并调整了代码，使其只打开/关闭单击的headerExcellent的内容！非常感谢。谢谢你，这给了我一条好路。它正在关闭所有“侧导航块项目”，而我需要它只打开/关闭与单击的h3相同的“侧导航项目”内的项目。@sarah3585请查看我的更新。我添加了一个新的JSFIDLE并调整了代码，使其只打开/关闭单击的headerExcellent的内容！非常感谢。