jquery - 在 jQuery 中使用 Accordion 样式菜单时，有没有办法修复像素移动？

Question

对于一个项目，我需要一些看起来很像 jQuery UI 的 Accordion 功能的功能，但我不使用 jQuery UI。但我注意到我的代码存在的问题也存在于 jQuery UI Accordion 中。所以我会用它作为例子。

这是 jQuery UI Accordion 的链接:http://jqueryui.com/demos/accordion/

如果您注意到，当您单击“第 2 节”时，“第 4 节”按钮会向上移动几个像素，当动画完成时，它会向下移动几个像素以收回其位置。我注意到列表中的元素越多，当您激活列表顶部的动画时，“间隙”就越大。

起初，我认为这是由于关闭元素的动画与打开元素的动画没有同时开始造成的。但在我用谷歌搜索同时启动两个动画的解决方案后，我发现我正在使用正确的方法来做到这一点。

然后我想可能是缓动导致了这个问题，所以我在 animate() 中使用“线性”作为缓动选项。但问题仍然存在。

有办法解决吗？确保前 2 个元素动画时最后一个元素不会移动？

我这么问是因为我很确定我的客户会认为这是一个恼人的错误。

感谢您的帮助!

Answer 1

这是一种解决方法，但如果您找不到更好的解决方案并且客户坚持修复它，您可以尝试此方法。在动画之前获取将要动画的元素下方的所有元素的绝对位置，并将所有这些元素设置为绝对位置。动画结束时恢复位置、顶部和左侧的默认样式值。