jQuery UI Accordion 打开时跳动答案

【问题标题】：jQuery UI Accordion Jumpy When OpenedjQuery UI Accordion 打开时跳动
【发布时间】：2013-01-03 10:13:34
【问题描述】：

我的页面上有一个手风琴小部件，它在打开动画时会展开超过它应该停止的位置（在动画结束时捕捉回正确的大小），并在开始动画关闭时捕捉到相同的扩展大小.在我的例子中，手风琴内容应该扩展到 150px，但我在 Chrome 的 Inspect Element 窗口中看到它的动画并看到它短暂地达到了 185px。

我看到其他人建议在将手风琴部分更改为 position: absolute 以进行计算时，当 jQuery 进行大小计算时，填充和/或边距可能会欺骗 jQuery。

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

任何帮助都将不胜感激。

【问题讨论】：

建议使用文档中定义的标记。您的树中有额外的级别，这可能会导致意外行为并且不能被视为错误

标签： jquery jquery-ui user-interface accordion

【解决方案1】：

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

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

希望对你有帮助

【讨论】：

【解决方案2】：

溢出：自动是关键！如果您查看 jquery 手风琴示例，您会注意到他们的手风琴没有跳转，我发现它归结为 .ui-accordion-content 类的 overflow:auto 样式。

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

边距是我的问题.. 应该快速构建我自己的手风琴。 #LazyDeveloperProblems

【解决方案4】：

对我来说，它最终只是有人在 .ui-accordion-content 潜水秀上设置了一个可怕的最小高度......

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

为我工作

【讨论】：

【解决方案5】：

它看起来像一种错误。在 jqueryui AIP 示例上也有同样的效果：

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

【讨论】：

【解决方案6】：

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

【讨论】：