隐藏最接近的元素

Question

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

小提琴中注释掉的代码就是我现在所拥有的 - 但如果点击了任何切换链接，它会隐藏所有内容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()方法在这种情况下没用，你可以使用{{ 1}} / .closest()和parent()方法：

.next()

http://jsfiddle.net/xUgG5/

Answer 2

这似乎适用于你的小提琴：

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

Answer 3

只需使用first（）。

http://jsfiddle.net/P6GEC/9/

$(function () {
    $('.toggle_group_name').click(function () {
        $('.group_name').first().toggle();
    });
});

http://api.jquery.com/first/