我有一张桌子。每一行都是一条记录。如果您通过 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;
});