我一直在努力使用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标题下的所有内容保持隐藏的方式,直到被要求为止。也许有人有想法。我搜索了所有我能想到的地方,但没有找到任何解决方案。谢谢你的任何指示。
答案 0 :(得分: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);
});
}