打开时jQuery UI Accordion Jumpy

Question

我的页面上有一个手风琴小部件，它会在动画打开时缩小过去的位置（在动画结束时回复到正确的大小），并在开始动画关闭时捕捉到相同的扩展大小。在我的情况下，手风琴的内容应该扩展到150px，但我已经在Chrome的Inspect Element窗口中观看了它的动画，并且看到它的亮度为185px。

我已经看到其他人建议填充和/或边距可能会在将手风琴部分简要地改为position: absolute进行计算时进行大小计算时愚弄jQuery。

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

溢出：自动是关键!!如果你查看jquery手风琴的例子，你会注意到它们没有跳转，我发现它是由.ui-accordion-content类的溢出：自动样式。

所以你需要做的就是将overflow：auto样式添加到内容类中。

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

Answer 3

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

Answer 4

对我而言，最终有人在.ui-手风琴内容潜水中设置了一个惊人的最小高度......

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

为我工作

Answer 5

它看起来像一种bug。 同样的效果是对jqueryui AIP的例子：

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

Answer 6

一个简单的解决方法是将小部件包含在<div>标记中，然后将手风琴应用于该标记。否则，手风琴动作试图调整边距和填充，这会导致“跳跃”。