在表格中使用时的 jquery.toggle 和布局问题

Question

我有一张桌子。每一行都是一条记录。如果您通过 jquery 单击一行（记录），我会在其下方创建一个新的 TR，然后通过 AJAX 插入一个新表（与上述记录有关的数据的相关子集）。这是首先加载的，然后我以漂亮的动画方式展开 TR。

看起来不错。

现在它已加载并展开，我想轻松切换此 TR，以便可以折叠和展开它们，而无需通过 AJAX 重新加载内容。

显而易见/最简单的选择是更改触发器的事件处理程序并给它一个 TOGGLE 事件。

从功能上讲，这是可行的。不过，从美学上讲，这完全是一团糟。

当我第一次 .toggle 关闭时，新 TR 的内容确实很好地折叠，但父表的其余部分直到 TR 完全折叠后才会跟随，然后父表迅速折叠以填补空白。这很不和谐。

然后，在下一个 .toggle 打开时，子表在父表之外进行动画处理，然后迅速折叠其宽度。也很不和谐，现在我只剩下一张与其父级相比非常窄的桌子。

如果我从切换事件中省略动画，它可以正常工作，尽管没有漂亮的过渡。我猜这可能与 jQuery 相关的更多 CSS 相关？关于我可能需要声明 CSS-wise 以防止这种不稳定的视觉行为发生的任何指针？

编辑：根据马特的要求，标记/脚本：

<!-- tr of parent table -->
<tr>
    <td><a href="" class="expandable-expanded">link</a></td>
    <td></td>
    <td></td>
</tr>
<!-- this is the tr I create via jQuery and then want to toggle via above link -->
<tr class="expandedContent">
    <td colspan="3">
        <div class="loadedContent" style="display: block;"><div>
        ... my nested table is here ...
        </div></div>
    </td>
</tr>

我用于切换的 jquery：

$("td a.expandable").click(function(){
    //jquery here that does the initial creation of the TR and loading of the AJAX...

    // after loading ajax, remove the event
    $(this).unbind('click');
    // and then attach the new toggle event
    $(this).closest("tr").next("tr.expandedContent").toggle("slow");

    return false;
});

Answer 1

尝试折叠/展开嵌套表而不是它的容器。

Answer 2

table（和tr）元素（尤其是height）上的动画充其量是不稳定的。尝试使用div's 和诸如此类的方式编写您的标记，您会有更好的运气。