1

我有一个表格，它有一个标题行、一个“项目”行（如果你愿意的话）和一个详细信息行。项目行和明细行会重复，所以表中的每一个偶数行（即表中的第二行是第一个“项目”行）都是一个项目行，每个奇数行都是一个“详细信息”行，但标题除外。

下面的脚本有效，除了 jQuery slideToggle 不滑动。在展开动作中，它只是打开，而在折叠动作中，它需要一秒钟然后消失。

见下面的表结构和脚本：jsFiddle（点击“Column[1,2,3]行）

<script type="text/javascript">
    $(document).ready(function () {
    $("#sometable tr:odd").addClass("odd");
    $("#sometable tr:not(.odd)").hide();
    $("#sometable tr:first-child").show();

    $("#sometable tr.odd").click(function () {
        $(this).next("tr").slideToggle("slow");
    });
});


<table id="sometable">
<tr>
    <th>
        Header1
    </th>
    <th>
        Header2
    </th>
    <th>
        Header3
    </th>
</tr>
<tr>
    <td>
        Column1
    </td>
    <td>
        Column2
    </td>
    <td>
        Column3
    </td>
</tr>
<tr>
    <td colspan="3">
        <p>Details about item 1</p>
    </td>
</tr>

4

1 回答 1

4

slideToggle不能很好地与tr. 我相信这与overflow: hidden不使用tr.

最简单的解决方法是简单slideToggle的p而不是tr.

http://jsfiddle.net/hEyDN/4/

于 2012-11-05T15:50:28.693 回答