javascript - jquery 显示/隐藏元素

Question

jquery中如何找到下一个XX元素？我想要实现的是，当有人点击其中一个“event_details_arrow”类时，下一个“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

如果你确定只有一个 parent ，你可以使用类似的东西:

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