jQueryUI 对表列的影响

Question

尝试使用 jQueryUI 将表格列滑出 View ，然后再返回。遗憾的是，它似乎没有保留正确的列宽和位置，因此该列最终出现在错误的位置。

我遇到的问题的提炼版本在 http://jsfiddle.net/Z76xE/6/ .我已经看到了许多不受欢迎的行为的不同变体，但是这里指向的简单案例只会在扩展操作上感到困惑:它首先将列扩展到大于 CSS 修复它的 150px，然后在最后将其左边缘折断，使该列再次变为 150 像素，在表格的左侧留下空白区域。

在无休止的玩这个和跟踪 JavaScript 的过程中，我意识到 jQuery 获得的列宽与声明的 CSS 不同。所以我在 [not] 告诉 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>

那么你的运气会更好:http://jsfiddle.net/ambiguous/VUvCw/

您必须稍微调整 CSS 以获得您想要的视觉布局，但该结构应该让您的动画得到整理。