jQuery slideToggle 表滞后然后切换（无幻灯片）答案

【问题标题】：jQuery slideToggle on table lags then toggles (no slide)jQuery slideToggle 表滞后然后切换（无幻灯片）
【发布时间】：2012-11-02 01:24:52
【问题描述】：

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

下面的脚本可以工作，除了 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>

【问题讨论】：

标签： javascript jquery html jquery-ui

【解决方案1】：

slideToggle 不适用于tr。我相信这与 overflow: hidden 与 tr 不工作有关。

最简单的解决方法是简单地使用slideToggle p 而不是tr。

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

【讨论】：