сделать слайд-тумблер избирательным, когда он показывается

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, нажимая на соответствующий заголовок, но только чтобы показать "некоторые вещи" и заголовки 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 остается скрытым до тех пор, пока его не попросят. Может, у кого-то есть идея. Я искал все места, о которых я могу думать, но не нашел ничего подобного решению этого. Спасибо за любые указатели.

  • 0
    создайте скрипку пожалуйста
Теги:
collapse

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 Пример здесь

Ещё вопросы

Сообщество Overcoder
Наверх
Меню