取消隐藏时使 slideToggle 具有选择性

Question

我一直在努力使用 nextUntil 和 slideToggle 来制作可折叠的部分。我知道我可以使用包装器来做到这一点，但我真的不想 - 因为我希望能够将其添加到现有文件中而无需编辑。我的目标是管理具有（例如）

<h1>Heading</h1><p>some stuff></p>
   <h2>heading</h2><p>blah....</p>
   <h2>heading</h2><p>blah....</p>    
   <h2>heading</h2><p>blah....</p>
<h1>Heading</h1><p>some stuff></p><p>more stuff</p>
   <h2>heading</h2><p>blah....</p>
   <h2>heading</h2><p>blah....</p>    
   <h2>heading</h2><p>blah....</p>

并且能够通过单击相关标题来展开/折叠 h1 标题之间的内容，但仅在单击 h1 标题时显示“一些内容”和 h2 标题，将 h2 标题下方的内容折叠直到你点击 h2 标题。

如果只有一级，我也可以的

function collapsible(tag)
{
    $(tagname).nextUntil(tag).hide(); //hide everyting between one <tag> and the next
    $(tag).click(function(){    
        $(this).nextUntil(tag).slideToggle(500);
        });//handler to toggle visibility of the content between this <tag> and the next
}

但我现在可以找到可靠的方法来确保 h2 标题下的所有内容在被要求之前一直隐藏。也许有人有一个想法。我搜索了所有我能想到的地方，但没有找到类似的解决方案。感谢您的任何指点。

Answer 1

我相信这就是你想要做的：

$(function () {
    $('h2,p').hide();
});    

test = function (me) {
    $(me).nextUntil('h2').slideToggle(500);
    $(me).nextUntil('h1').filter('h2').slideToggle(500).off('click').on('click', function () {
        $(this).next("p").slideToggle(500);
    });
}

jsiddle Example here