jquery显示/隐藏元素

Question

如何找到jquery中的下一个XX元素？我想要实现的是，当有人点击其中一个“event_details_arrow”类时，下一个“event_detail”类将显示/隐藏。

这是我的代码，但目前显示/隐藏所有event_detail类，只要我点击任何“event_details_arrow”。

$(".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

如果您肯定有一个家长，你可以使用类似：

$(".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(); 
     });