Выбор тега p в элементе div с идентификатором с использованием одноуровневого тега h3 с классом

Question

Извинения, если заголовок выше немного запутан, писать эти вещи на простом английском языке зачастую сложнее, чем проблему внутри!

Я уверен, что это довольно простая проблема, но я немного связан с селекторами jQuery и иерархией, и теперь не вижу дерева для деревьев ... это упражнение в классе, поэтому я застрял с HTML-кодом как есть.

Я пытаюсь скрыть / отобразить абзацы под заголовком H3, дважды щелкнув заголовок H3.

<div class="chapter" id="chapter-preface">
    <h3 class="chapter-title">Preface</h3>
    <p>Blah, blah, blah, blah, blah</p>
    <p>Blah, blah, blah, blah</p>
    <p>Blah, blah, blah</p>
    <p>Blah</p>
</div>
<div class="chapter" id="chapter-1">
    <h3 class="chapter-title">Chapter 1</h3>
    <p>Rhubarb, rhubarb, rhubarb, rhubarb, rhubarb, rhubarb</p>
    <p>Rhubarb, rhubarb, rhubarb</p>
</div>

Самый близкий к этому моменту следующий код jQuery:

$('.chapter-title').dblclick(function() {
    $('div p').toggleClass('hidden');
});

но, как, вероятно, довольно очевидно, это имеет эффект только скрытия всех тегов p под обоими элементами div. Я хочу, чтобы он просто скрывал теги p под соответствующим заголовком H3, по которому дважды щелкнули. Я пытался использовать «это», но, очевидно, неправильно, так как это не дало желаемого эффекта.

Полагаю, мне нужно каким-то образом выбрать родительский элемент тега H3, по которому щелкнули, и связанный с ним уникальный идентификатор, а затем применить событие скрытия / отображения к любым дочерним тегам p внутри .... какие-либо предложения?

Ура!

Answer 1

Вы можете просто использовать .nextAll() или .siblings(), чтобы выбрать все элементы p, следующие за этим h3 в родительском div, без фактического выбора родитель div:

$('.chapter-title').dblclick(function() {
    $(this).nextAll('p').toggleClass('hidden');
});

Answer 2

Используя nextAll('p'), вы получите все элементы, следующие за текущим с соответствующим селектором.toggle() будет затем скрывать / показывать их по мере необходимости и сохранять использование вашего класса.

Попробуйте это:

$('.chapter-title').dblclick(function() {
    $(this).nextAll('p').toggle();
});

Пример скрипки

Answer 3

Попробуйте это:

$('.chapter-title').dblclick(function() {
   $(this).siblings('p').toggleClass('hidden');
});

Answer 4

Вы можете использовать .nextAll или .siblings:

$('.chapter-title').dblclick(function() {
    $(this).nextAll("p").toggleClass('hidden');
});

или

$('.chapter-title').dblclick(function() {
    $(this).siblings("p").toggleClass('hidden');
});

Answer 5

почему бы просто не использовать toggle() вместо toggleClass ('hidden') , и в вашем случае у вас есть только элементы para внутри вашего div, так что вы можете снова просто напишите siblings() .но если у вас есть другие элементы, тогда конечно братья и сестры ('p') это путь.

Вот код

 $('.chapter-title').dblclick(function() {
$(this).siblings().toggle(); 
});

Просто если вам нужно знать больше:

работает --- Когда щелкается любой заголовок, это изменяет свойство CSS display:inline на display:hidden, и при повторном щелчке по заголовку это свойство CSS возвращается к display:inline. да уж ! это восстанавливает это.