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