Question

尝试使用jQueryUI将表格列滑出视图，然后重新进入。遗憾的是，它似乎没有保留正确的列宽和位置，因此列最终位于错误的位置。

我遇到的问题的提炼版本是http://jsfiddle.net/Z76xE/6/。我已经看到了许多不良行为的不同变体，但这里指出的简单情况只会在扩展操作上混淆：它首先将列扩展为大于CSS修复它的150px，然后在结束时将其左边缘扣合，使柱子重新生成150px，在桌子的左侧留下空白空间。

在玩这个游戏并通过JavaScript追踪的无尽时间里，我意识到jQuery获得的列宽与CSS声明的不同。所以我在[不]告诉jQuery / jQueryUI更新其对列宽的理解方面做错了。我只是不知道在哪里！

感谢您的任何想法。

Answer 1

如果您在打开DOM检查器的情况下观看动画，则会看到<td>被<div>包裹，<div>被动画化。但是，这个：

<tr>
    <div>
        <td></td>
    </div>
</tr>

是无效的HTML，所以谁知道浏览器将采用哪种奇怪和奇妙的东西。我们确实知道它会做一件奇怪的事情：当你将它打开时，它会将<td>留在错误的位置。

对表格元素的定位和显示进行紊乱是一个噩梦，所以你最好避免它。如果您将HTML更改为：

<td>
    <div id="NavColumn">
        I am the left-side column
    </div>
</td>

你需要稍微调整一下CSS以获得你想要的视觉布局，但是这个结构应该让你的动画整理出来。