Jquery:尝试显示/隐藏表行

我试图使用Jquery显示/隐藏表行，但遇到了一些效果问题。基本上，我有一个事件日程表，当你点击某一行的“详细信息”按钮时，它应该会直接显示它下面的那一行

以下是我正在处理的页面的链接：

然而，至少可以说效果有点不稳定，更不用说我还没有开发出一种“手风琴”方法来折叠除活动行之外的所有行

HTML代码（ExpressionEngine使用{count}变量）

日期事件/位置注册打开操作
{startDate format=“%F%d”}{if endDate！=startDate}-{endDate format=“%d”}{/if}，{startDate format=“%Y”}
{if事件_摘要}{if:else}{event}{/if}
{opendate format=“%F%d”}
隐藏的下拉内容在这里

还有Javascript： http://code.jquery.com/jquery-1.8.3.js“>

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function() {
    $('tr.parent td')
        .on("click","span.btn", function(){
            var idOfParent = $(this).parents('tr').attr('id');
            $('tr.child-'+idOfParent).toggle('slow');
        });
    });
});

</script>

//

首先，在隐藏行之前缺少一个结尾

一种方法是使用jQuery中的函数，它可以在标记中存储信息

    <tr class="parent">
        <td> <span class="btn">
                    <a data-id="{id}" href="#">Details</a>
                    <!-- notice data-id -->
                </span>
        </td>
    </tr><!-- this wasn't there -->
    <tr class="child" id="child-{id}" height="280" style="display:none;width:900px;">
        <td colspan="4">HIDDEN DROPDOWN CONTENT HERE</td>
    </tr>

有很多方法可以做到这一点，这只是一种方法

    <tr class="parent">
        <td> <span class="btn">
                    <a data-id="{id}" href="#">Details</a>
                    <!-- notice data-id -->
                </span>
        </td>
    </tr><!-- this wasn't there -->
    <tr class="child" id="child-{id}" height="280" style="display:none;width:900px;">
        <td colspan="4">HIDDEN DROPDOWN CONTENT HERE</td>
    </tr>

$('tr.parent td').on("click", "span.btn a", function () {
    var id = $(this).data('id'); // save id from the link. 

    $(".child").slideUp(); // slideUp all of them

    $("#child-" + id).slideDown(); // slideDown the one we're looking for. 
});