jqueryの表示/非表示

Question

jqueryの次のXX要素はどうやって見つかりますか？私が達成しようとしているのは、誰かが "event_details_arrow"クラスの1つをクリックすると、次の "event_detail"クラスが表示/非表示になるということです。

これは私のコードですが、「event_details_arrow」のいずれかをクリックするたびに、すべてのevent_detailクラスを表示/非表示にしています。

$(".event_details_arrow").bind("click", function() { 
     $(".event_detail").slideToggle(); 
    }); 
       <tr> 
        <td>yyy</td> 
        <td class="event_details_arrow"><span></span></td> 
        <td class="lastcol"><a href=""><span>Register</span></a></td> 
       </tr> 
       <tr class="event_detail"> 
        <td colspan="3">text</td> 
       </tr> 
        <tr> 
        <td>yyy</td> 
        <td class="event_details_arrow"><span></span></td> 
        <td class="lastcol"><a href=""><span>Register</span></a></td> 
       </tr> 
       <tr class="event_detail"> 
        <td colspan="3">text</td> 
       </tr> 
       <tr> 
        <td>yyy</td> 
        <td class="event_details_arrow"><span></span></td> 
        <td class="lastcol"><a href=""><span>Register</span></a></td> 
       </tr> 
       <tr class="event_detail"> 
        <td colspan="3">text</td> 
       </tr> 

おかげで、おそらく

Answer 1

使用すると、1つの親を持っていることについて確実な場合のように、あなたが何かを使用することができますそれらのどれも動作するようには思えない

$(".event_details_arrow").bind("click", function() { 
    $(this).parent().next().slideToggle(); 
}); 

Answer 2

$(".event_details_arrow").bind("click", function() { 
      $(this).next(".event_detail").slideToggle(); 
     }); 
// or 
    $(".event_details_arrow").bind("click", function() { 
      $(this).closest(".event_detail").slideToggle(); 
     }); 

？

Answer 3

 $(".event_details_arrow").bind("click", function() { 
      $(this).closest(".event_details_arrow").slideToggle(); 
     });