jQuery slideToggle在表滞后然后切换（没有幻灯片） [英] jQuery slideToggle on table lags then toggles (no slide)

问题描述

我有一个表格，它有一个标题行，一个item行，如果你愿意的话，还有一个详细信息行。项目行和详细信息行将重复执行，以便表格中的每个偶数行（即表中的第二行是第一个项目行）将是一个项目行，每个奇数编号将是一个详细信息行，除了标题。

I have a table which will have a header row, a "item" row, if you will, and a details row. The item row and the details row will be repeating, so that every even numbered row in the table (i.e., the second row in the table is the first "item" row) will be an item row and every odd numbered will be a "details" row, except for the header.

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

The script below works, except the jQuery slideToggle is not sliding. On the expand action, it just opens up, and on the collapse action it takes a second and then disappears.

请参阅下面的表格结构和脚本： jsFiddle （点击Column [1,2,3]行）

See the table structure and script below: jsFiddle (click the "Column[1,2,3] row)

<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>

推荐答案

slideToggle 在 tr 中不起作用。我认为它与溢出有关：隐藏不适用于 tr 。

slideToggle does not work well with tr. I believe it has to do with overflow: hidden not working with tr.

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

The easiest workaround would be to simply slideToggle the p rather than the tr.

http ：//jsfiddle.net/hEyDN/4/

这篇关于jQuery slideToggle在表滞后然后切换（没有幻灯片）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！