Question

在我的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完全没有。

即使没有足够的内容填充这些内容，如何才能从内容部分中获得合理的尺寸？

Answer 1

autoHeight已在1.9中弃用，已在1.10中删除。

使用：

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

自动调整内部div。

<强>更新

我发现这仍然是一个非常活跃的帖子，所以我决定确保我的答案仍然有效。看起来这可能不再适用于jQuery UI 1.11。它注意到[content]属性已被弃用，而是使用[panel]。现在让代码片段更像是这样：

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

我还没有测试过这个，刚刚发现，并且在我有时间测试时会返回并删除这个评论

Answer 2

当你声明手风琴控制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 );

这意味着当你选择一个有大量文字的区域时，手风琴会重新计算它。

Answer 3

From the docs听起来你需要设置

clearStyle: true

......还有

autoHeight: false

我相信使用clearStyle可以动态添加内容而不会让Accordion受阻。

所以试试这个......

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

Answer 4

看起来这里的所有答案现在都使用了弃用的选项。

使用最新版本的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方法。

Answer 5

设置DIV的高度就可以了。

$(document).ready(function() {

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

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

Answer 6

关闭自动将工作...（除了自动或填充之外的任何字符串），例如解决方案告诉使用＆＃34;面板＆＃34;。但...

这与放入"heightStyle"的任何垃圾字符串相同。您要找的"heightStyle"是"content"。

（jQuery UI 1.12中选项"heightStyle"的值）

"auto"：所有面板都将设置为最高面板的高度。
"fill"：根据手风琴的父高度扩展到可用的高度。
"content"：每个小组的内容都与其内容一样高。

实施例： https://jsfiddle.net/qkxyodpq/5/

希望有所帮助。

Answer 7

在您的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
},

Answer 8

只需调用手风琴.resize()方法，这将重新计算其大小。 http://docs.jquery.com/UI/Accordion#method-resize

Answer 9

我最近设置了一个手风琴，当一个标签被激活并遇到同样的问题时，它会通过ajax检索内容。我尝试使用这里发布的一些建议，但在我将heightStyle设置为内容之前，他们从未完全成长过面板。

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

我正在使用jQuery-UI版本1.10.4。

Answer 10

让我做以下工作准确。

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

}）;

Answer 11

使用 heightStyle 选项控制手风琴和每个面板的高度。

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

可能的值：

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

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

11 个答案: