Я боролся с 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, leavin gthe stuff ниже заголовков 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 остается скрытым до тех пор, пока его не попросят. Может, у кого-то есть идея. Я искал все места, о которых я могу думать, но не нашел ничего подобного решению этого. Спасибо за любые указатели.
Я считаю, что это то, что вы пытаетесь сделать:
$(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);
});
}