Javascript 如何调整jQuery UI手风琴的高度？

在我的UI中，我有一个手风琴设置，如下所示：

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

$('#id').accordion({heightStyle: 'panel'});

第一节
…内容。。。
//更多章节

手风琴在刚成型时工作正常，而且似乎能够很好地适应每个部分的内容。但是，如果在.accordion（）调用之后（通过ajax）在accordion中添加更多内容，则该部分的内部内容将溢出

由于手风琴几乎没有任何内容，因此所有的内部div都非常小，因此内容溢出，你可以看到手风琴，里面有滚动条，几乎没有查看区域

我尝试将最小高度样式添加到对象列表div和内容div中，但没有效果。将最小高度添加到内部div有点奏效，但它弄乱了手风琴的动画，而将其添加到object_list div则完全没有效果

---

即使没有足够的内容来填充这些部分，如何从内容部分中获得合理的大小？

只要调用accordions

.resize（）

方法，这将重新计算其大小。

---

声明accordion控件div时，可以在div的样式标记中添加高度。然后可以设置fillSpace:true属性，以强制accordion控件填充该div空间。这意味着您可以将高度设置为最适合页面的高度。然后，您可以在添加代码时更改div的高度

如果您希望手风琴根据需要动态调整其包含内容的大小，您可以执行以下技巧

这意味着，当您选择一个包含大量文本的区域时，手风琴将重新计算它。

听起来您需要进行设置

clearStyle: true

…而且

autoHeight: false

我相信使用clearStyle可以让您动态添加内容，而无需手风琴的阻碍

所以试试这个

$( ".selector" ).accordion({ clearStyle: true, autoHeight: false });

---

看起来这里的所有答案现在都使用了不推荐的选项

使用最新版本的jQuery UI（1.10.x），您应该使用

heightStyle:“fill”

初始化手风琴以获得预期效果

$(".selector").accordion({ heightStyle: "fill" });

您可以在以下jQuery UI API文档中阅读更多内容：

如果页面尺寸动态变化，并且需要重新计算手风琴大小，则应使用

刷新
方法刷新手风琴：

$(".selector").accordion("refresh");

这是首选方法，因为现在不推荐使用
resize
方法。
在中不推荐使用autoHeight，并在中删除

使用：

自动调整内部div的大小

更新：

我看到这仍然是一个相当活跃的帖子，所以我决定确保我的答案仍然有效。看起来这在jQuery UI中可能不再有效。它注意到[content]属性已被弃用，并建议改为使用[panel]。使代码段现在看起来更像这样：

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

$('#id').accordion({heightStyle: 'panel'});

我还没有测试这个，只是找到了，当我有时间测试时，我会返回并删除这个注释
设置DIV的高度就可以了

$(document).ready(function() {

    $("#accordion").show().accordion({
        autoHeight: false
    });

    $("#accordion div").css({ 'height': 'auto' });
});      

我最近设置了一个手风琴，当一个选项卡被激活并遇到同样的问题时，它可以通过ajax检索内容。我尝试使用这里发布的一些建议，但在我将heightStyle设置为content之前，它们从未正确地扩展面板

$("#myaccordion").accordion({
  heightStyle: "content",
  activate: function(event ui) {
    //use ajax to retrieve content here.
  }
});

我使用的是jQueryUI版本1.10.4。
对于我来说，执行以下操作非常准确

$( "#accordion" ).accordion({
    autoHeight: false,

}))
 在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
},

关闭自动将工作。。。（使用除自动或填充之外的任何字符串）例如告诉使用“panel”的解决方案。但是

这与为
“heightStyle”
放入任何垃圾字符串相同。您要查找的
“高度样式”
是
“内容”






（jQuery UI 1.12中选项“heightStyle”的值）


“自动”
：所有面板将设置为最高面板的高度
“填充”
：根据手风琴的父级高度展开到可用高度
“内容”
：每个面板的高度仅与其内容相同。

例如：

希望对您有所帮助。
使用heightStyle选项控制手风琴和每个面板的高度

$("#accordion").accordion({
  heightStyle: "content"
});

可能值：

“自动”：所有面板将设置为最高面板的高度
“填充”：根据手风琴的父级高度展开到可用高度
“内容”：每个面板的高度仅与其内容相同
您仍然需要设置fillSpace:true并更改容器高度，才能使.resize（）有效。谢谢，这对我来说很有效，但是我需要使用
.accordio（“resize”）
而不是
。resize（）
注意，此方法过去和现在都是有效的。您现在应该改用
.accordion（“刷新”）
了。我真的不明白为什么autoHeight=false会让它工作（看起来应该是相反的），但它工作了。干杯@IcodeforOffee我有相同的查询…我需要在哪里编写//getter和settercode@pradnya直接进入手风琴的javascript部分。您只需获取属性/选项autoHeight并将其设置为false。此选项为，并与
clearStyle
和
fillSpace
选项组合。现在应该使用新的
heightStyle
选项。有关更多信息，请参见我的答案。
“高度样式”：“内容”
有效。看@nullability对我有用。“heightStyle”属性是v1.10+的关键，“刷新”解决方案解决了我在手风琴初始化后将内容加载到手风琴中的问题。最新版本的答案正确，我想知道为什么这不是