jquery show / hide元素

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

如果你确定有一个父母，你可以使用类似的东西：

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