jQuery UI手风琴跳动时打开

Question

我的页面上有一个手风琴小部件，它在动画打开时扩展到应该停止的位置(在动画结束时恢复到正确的大小)，并在动画开始关闭时恢复到相同的扩展大小。在我的例子中，手风琴内容应该扩展到150px，但我在Chrome的Inspect Element窗口中观察过它的动画，看到它短暂地扩展到185px。

我看到其他人建议，填充和/或边距可能欺骗jQuery，当它进行大小计算时，将accordion部分更改为position: absolute简要地进行计算。

http://jsfiddle.net/shadowycore/T5fnZ/1/

如有任何帮助，我将不胜感激。

Answer 1

我有同样的问题，几个小时后，我终于设法通过添加以下CSS来解决它:

 .ui-accordion .ui-accordion-content{
      box-sizing:content-box;             
      -moz-box-sizing:content-box;
}

希望对大家有所帮助

Answer 2

溢出:auto是KEY!!如果你检查jquery手风琴的例子，你会注意到他们没有跳转，我发现这是在。ui-accordion-content类的overflow:auto样式。

所以你所需要做的就是给content类添加overflow:auto样式。

.ui-accordion .ui-accordion-content{
  overflow:auto;
}

Answer 3

将margin:0和padding:0设置在手风琴的h3和ul标签上，跳跃就消失了

Answer 4

对于我来说，这只是某人在。ui-accordion-contentdive上设置了一个奇怪的min-height…

.ui-accordion-content{ min-height: unset; }

for me

Answer 5

看起来有点bug。同样的效果在jqueryui AIP示例中:

http://api.jqueryui.com/accordion/entry-examples

Answer 6

一个简单的修复方法是将小部件包含在<div>标记中，并将手风琴应用于该标记。否则，手风琴操作将尝试调整边距和内边距，从而导致"跳跃"。