0

我一直在努力使用 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 标题下的所有内容在被要求之前一直隐藏的方法。也许有人有一个想法。我已经搜索了所有我能想到的地方，但没有找到任何类似的解决方案。感谢您的任何指示。

4

1 回答 1

0

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

$(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示例在这里

于 2014-02-24T00:27:11.097 回答