手风琴高度问题答案

【问题标题】：accordion height issue手风琴高度问题
【发布时间】：2011-12-23 19:31:54
【问题描述】：

我有一个简单的手风琴设置，只有两个部分。顶部的第一部分默认折叠，底部的第二部分默认展开。

我遇到了一个问题，顶部的第一部分在展开时在某处设置了一个样式，该样式设置了“3791.8px;”的高度，从而创建了这个巨大的垂直空白（我的内容是只有 1000 像素）。我不确定它来自哪里，因为我搜索了附加到脚本的默认 css 并没有发现任何相关内容。 (http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/)

我已经尝试定义该特定 div 中的高度、手风琴 div、内联、外部切换溢出以及其他所有尝试关闭此空白/覆盖其来源的样式的方式。

我能做什么？

这几乎是我实现的所有内容（仅使用我的文本内容）；

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $( "#accordion" ).accordion({ active: 1 });

  });

  </script>

<div id="accordion">

<h3><a href="#">Section 1</a></h3>

 <p> Text content </p>

<h3><a href="#">Section 2</a></h3>

<p> Text content </p>

</div>

问题链接： http://tinyurl.com/7xn33hb

【问题讨论】：

您可以为手风琴添加 CSS 吗？
最好是页面的链接。
好的，在Q上面添加了链接。
如果你使用<p>而不是<br />会发生什么？

标签： javascript jquery html css

【解决方案1】：

尝试设置autoHeight: false

$(document).ready(function() {
    $( "#accordion" ).accordion({ 
        active: 1,
        autoHeight: false
     });
});

【讨论】：

插件默认行为完全没有意义。感谢您的解决方案 +1

【解决方案2】：

默认情况下，它采用最高部分的高度，并使所有部分都达到该高度。您可以通过将 autoHeight 属性设置为 false 将其更改为仅使其成为实际内容的高度。例如

$( "#accordion" ).accordion({ active: 1, autoHeight: false });

【讨论】：

【解决方案3】：

默认情况下，jQuery UI 的手风琴小部件将 autoHeight 选项设置为 true。根据文档：

如果设置，最高内容部分将用作所有其他部分的高度参考。提供更一致的动画。

将其设置为false，如下所示：

$( "#accordion" ).accordion({ active: 1, autoHeight: false });

这会让你得到你想要的行为。

【讨论】：

我认为令人困惑的是，您提供的文档链接实际上是在谈论 heightStyle 而不是 autoHeight，即文档是错误的。

【解决方案4】：

只需设置您的autoheight to "false"

【讨论】：