滑動切換選擇性當它取消隱藏

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標題的東西，但只顯示「一些東西」和H2標題當單擊h1標題時，退出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