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，然后将hide / display事件应用于....任何建议中的任何子p标签？

干杯！

Answer 1

您只需使用.nextAll()或.siblings()选择父p中h3之后的所有div元素，而无需实际选择父{ {1}}：

div

Answer 2

试试这个：

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

Answer 3

使用nextAll('p')将获得当前跟随匹配选择器的所有元素。然后，toggle()会根据需要隐藏/显示它们，并保存您班级的使用。

试试这个：

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

Example fiddle

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'），在您的情况下，您的div中只有para元素，所以您可以再次简单地写siblings()。但如果您有其他元素，那么当然兄弟姐妹（'p'）是一种方法。

这是代码

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

如果您需要了解更多信息：

工作 ---当点击任何标题时，这会将CSS属性display:inline修改为display:hidden，当再次点击标题时，此CSS属性会更改为display:inline。是的！它恢复了它。

使用带有类的兄弟h3标记选择具有id的div中的p标记

5 个答案: