Question

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

看起来不错。

现在它已经加载和扩展了，我想轻松切换这个TR，这样就可以折叠它们并扩展它们，而无需通过AJAX重新加载内容。

显而易见/最简单的选择是更改触发器的事件处理程序并为其指定TOGGLE事件。

从功能上讲，这是有效的。但在美学方面，它完全是一团糟。

当我第一次.toggle关闭时，新TR的内容确实崩溃了，但是在TR完全折叠之前，父表的其余部分不会跟随，然后父表快速折叠以填补空白。这很不耐烦。

然后，在要打开的下一个.toggle上，子表在父表外部动画，然后快速折叠其宽度。同样非常刺耳，现在我与其父母相比留下了一张非常狭窄的桌子。

如果我从toggle事件中省略动画，它可以正常工作，虽然没有很好的过渡。我猜这可能是更多与jQuery相关的CSS相关？关于我可能需要声明CSS以保持这种不稳定的视觉行为发生的任何指示？

编辑：每个matt的请求，标记/脚本：

<!-- 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和诸如此类的东西来编写你的标记，你会有更好的运气。

表中使用时出现jquery.toggle和布局问题

2 个答案: