在我的UI中，我有一个像这样的手风琴设置：
<div id="object_list">
<h3>Section 1</h3>
<div>...content...</div>
// More sections
</div>
手风琴在首次成型时可以正常工作，并且它似乎可以很好地适应每个部分内的内容。但是，如果我在.accordion（）调用之后（通过ajax）在手风琴中添加更多内容，则该节的内部最终会溢出。
由于手风琴的形成几乎没有任何内容，所以所有的内部div都非常小，因此内容溢出，你手里拿着带有滚动条的手风琴，几乎没有观看区域。
我试图将最小高度样式添加到object_list div，并且内容divs无效。将min-height添加到内部div中是有效的，但它搞砸了手风琴的动画，并将它添加到object_list div完全没有。
即使没有足够的内容填充这些内容，如何才能从内容部分中获得合理的尺寸？
答案 0 :(得分：67)
使用：
$('#id').accordion({heightStyle: 'content'});
自动调整内部div。
<强>更新
我发现这仍然是一个非常活跃的帖子，所以我决定确保我的答案仍然有效。看起来这可能不再适用于jQuery UI 1.11。它注意到[content]属性已被弃用，而是使用[panel]。现在让代码片段更像是这样：
$('#id').accordion({heightStyle: 'panel'});
我还没有测试过这个，刚刚发现，并且在我有时间测试时会返回并删除这个评论
答案 1 :(得分：34)
当你声明手风琴控制div时，你可以在div的样式标签中加一个高度。然后你可以设置 fillSpace：true 属性来强制手风琴控件填充div空间，无论如何。这意味着您可以将高度设置为最适合您的页面。然后，您可以在添加代码时更改div的高度
如果您希望手风琴根据需要动态调整其所包含的内容，您可以执行以下操作posted on the jQuery UI website。
//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );
这意味着当你选择一个有大量文字的区域时，手风琴会重新计算它。
答案 2 :(得分：18)
From the docs听起来你需要设置
clearStyle: true
......还有
autoHeight: false
我相信使用clearStyle可以动态添加内容而不会让Accordion受阻。
所以试试这个......
$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });
答案 3 :(得分：15)
看起来这里的所有答案现在都使用了弃用的选项。
使用最新版本的jQuery UI（1.10.x），您应该使用heightStyle: "fill"初始化您的手风琴以获得预期的效果。
$(".selector").accordion({ heightStyle: "fill" });
您可以在jQuery UI API文档中阅读更多内容：http://api.jqueryui.com/accordion/#option-heightStyle
如果您的页面尺寸动态变化并需要重新计算您的手风琴大小，则应使用refresh方法刷新您的手风琴：
$(".selector").accordion("refresh");
这是首选，因为现在不推荐使用resize方法。
答案 4 :(得分：4)
设置DIV的高度就可以了。
$(document).ready(function() {
$("#accordion").show().accordion({
autoHeight: false
});
$("#accordion div").css({ 'height': 'auto' });
});
答案 5 :(得分：2)
关闭自动将工作...（除了自动或填充之外的任何字符串），例如解决方案告诉使用＆＃34;面板＆＃34;。但...
这与放入"heightStyle"的任何垃圾字符串相同。您要找的"heightStyle"是"content"。
（jQuery UI 1.12中选项"heightStyle"的值）
"auto"：所有面板都将设置为最高面板的高度。"fill"：根据手风琴的父高度扩展到可用的高度。"content"：每个小组的内容都与其内容一样高。 实施例： https://jsfiddle.net/qkxyodpq/5/
希望有所帮助。
答案 6 :(得分：1)
在您的jquery-ui.js中搜索以下部分并将heightstyle: "auto"更改为heightstyle: "content"，以便更新的文件如下所示。
var accordion = $.widget( "ui.accordion", {
version: "1.11.4",
options: {
active: 0,
animate: {},
collapsible: false,
event: "click",
header: "> li > :first-child,> :not(li):even",
heightStyle: "content",
icons: {
activeHeader: "ui-icon-triangle-1-s",
header: "ui-icon-triangle-1-e"
},
// callbacks
activate: null,
beforeActivate: null
},
答案 7 :(得分：0)
只需调用手风琴.resize()方法，这将重新计算其大小。
http://docs.jquery.com/UI/Accordion#method-resize
答案 8 :(得分：0)
我最近设置了一个手风琴，当一个标签被激活并遇到同样的问题时，它会通过ajax检索内容。我尝试使用这里发布的一些建议，但在我将heightStyle设置为内容之前，他们从未完全成长过面板。
$("#myaccordion").accordion({
heightStyle: "content",
activate: function(event ui) {
//use ajax to retrieve content here.
}
});
我正在使用jQuery-UI版本1.10.4。
答案 9 :(得分：0)
让我做以下工作准确。
$( "#accordion" ).accordion({
autoHeight: false,
}）;
答案 10 :(得分：0)
使用 heightStyle 选项控制手风琴和每个面板的高度。
$("#accordion").accordion({
heightStyle: "content"
});
可能的值：