javascript - 隐藏最近的元素

Question

我有一些jquery隐藏索引页上的内容。

fiddle 中注释掉的代码是我目前所拥有的 - 但如果单击任何切换链接，它会隐藏所有内容 div。

HTML

<div>
  <h1>Dogs</h1>
  <a class="toggle_group_name">∆</a>
</div>

<div class="group_name">
    Dogs do this, that and something
</div>

<div>
  <h1>Cats</h1>
  <a class="toggle_group_name">∆</a>
</div>

<div class="group_name">
    Cats do this, that and something different
</div>

jQuery

$(function() {
    $('.toggle_group_name').click(function() {
        $(this).parents("div").find('.group_name').toggle();
    });
});

我只想隐藏/显示紧随切换链接之后的类，但无法使其工作。已尝试使用 parents、nextAll 以及我在 SO 上找到的类似示例中的各种其他方法，但到目前为止没有任何效果。

Answer 1

目标元素不是被单击元素的同级或父级，它是被单击元素的父级的下一个同级，因此 .parents() 和 .nextAll() 方法在这种情况下没有用，您可以使用 .closest()/parent() 和 .next() 方法:

$(this).closest('div') // closest parent div of the clicked element 
       .next('.group_name') // it's next .group_name sibling
       .toggle();

http://jsfiddle.net/xUgG5/