javascript - 最も近い要素を非表示にする

Question

インデックス ページのコンテンツを非表示にする jqueryがあります。

フィドルのコメントアウトされたコードは、現時点で私が持っているものですが、トグルリンクがクリックされると、すべてのコンテンツ div が非表示になります。

HTML

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

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

<div>
  <h1>Cats</h1>
  <a class="toggle_group_name">∆&lt;/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();
    });
});

トグルリンクの直後のクラスだけを非表示/表示にしたいのですが、うまくいきません。SOで見つけた同様の例から、、、および他のさまざまな方法を 使用しparentsてみましたが、これまでのところ何も機能していません。nextAll

Answer 1

これはあなたのフィドルで動作するようです：

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