jquery - 选择带有 id 的 div 中的 p 标签，使用带有类的兄弟 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');
});

但很明显，这只具有隐藏两个 div 下所有 p 标签的效果。我希望它只是隐藏双击的相关 H3 标题下的 p 标签。我尝试过使用“this”，但显然是错误的，因为它没有达到预期的效果。

我想我需要以某种方式选择单击的 H3 标签的父 div 以及与其关联的唯一 id，然后将隐藏/显示事件应用到其中的任何子 p 标签......有什么建议吗？

干杯!

Answer 1

您可以简单地使用 .nextAll()或.siblings()选择父级 div 中 h3 之后的所有 p 元素，而不实际选择父级 div:

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