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

Question

在我的用户界面中，我有一个手风琴式的设置，就像这样：

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

    // More sections
</div>

手风琴在首次形成时运作良好，并且似乎能够很好地调整每个部分内部的内容。但是，如果我在accordion()调用后（通过ajax）将更多内容添加到手风琴中，则该部分的内部div最终会溢出。

由于手风琴几乎没有任何内容就被形成，所有内部div都非常小，因此内容会溢出，导致手风琴内部有滚动条，并且几乎没有可视区域。

我已经尝试添加min-height样式到object_list div和content div，但均无效。将min-height添加到内部div似乎有些作用，但会破坏手风琴的动画效果，将其添加到object_list div则根本没有效果。

如何在内容不足以填充这些部分时获得合理的大小？

- KallDrexx

Answer 1

autoHeight在1.9中被弃用，1.10中被移除。

使用:

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

自动调整内部 div 的大小。

更新：

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

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

我还没有测试过这个，只是发现了它，等我有时间测试后会回来并删除这个评论。

- Keerigan

---

最新版本的正确答案，我不明白为什么这不是默认行为... - Henry Ruhs

我刚开始使用这个插件，这个选项确实解决了我在jqueryUI中设置内容高度为最高面板时遇到的问题。谢谢。 - AntonioCS

在版本1.11.4中，我仍然需要在“选项”下的定义中添加heightStyle: "content",来修复标准高度为500px。谢谢！ - Silvan

我刚刚使用了heightStyle: 'content'，它非常好用，因此面板的高度是基于其内容设置的。heightStyle: 'panel'也很好用。 - Robin

感谢您的帖子。我仔细检查了文档，panel不存在...请参阅下面的答案以获取更多详细信息。https://dev59.com/83E85IYBdhLWcg3wUBoZ#49077271 - phyatt

Answer 2

当你声明手风琴控制div时，你可以在样式标签中为div设置高度。然后，您可以将fillSpace: true属性设置为强制手风琴控件填充该div空间，无论如何都能够完全填充。这意味着您可以将高度设置为适合您页面的任何值。接下来，您可以在添加代码时更改div的高度。

如果您希望手风琴根据需要动态调整大小以适应其包含的内容，可以按照jQuery UI网站上发布的以下技巧执行。

//getter
var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
//setter
$( ".selector" ).accordion( "option", "autoHeight", false );

这意味着当您选择一个有很多文本的区域时，手风琴将重新计算该区域。

- ICodeForCoffee

---

我不太理解为什么 autoHeight = false 让它起作用（看起来应该相反），但它确实起作用了。干杯！ - KallDrexx

@ICodeForCoffee 我有同样的问题...我需要在哪里编写//getter和setter代码？ - user1071339

直接将@pradnya放入您手风琴的JavaScript部分中。您只需获取属性/选项autoHeight并将其设置为false即可。 - Jeff Noel

此选项在1.9中已被弃用，与clearStyle和fillSpace选项合并。现在应使用新的heightStyle选项。欲了解更多信息，请查看我的答案。 - nullability

'heightStyle': 'content' 可以正常工作。请参见 https://dev59.com/83E85IYBdhLWcg3wUBoZ#49077271 - phyatt

Answer 3

从文档中可以看出，你需要进行设置。

clearStyle: true

...而且还

autoHeight: false

我相信使用clearStyle可以在不受手风琴干扰的情况下动态添加内容。

所以尝试一下这个...

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

- Ben Coppock

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方法现已弃用。

- nullability

---

@nullability的方法对我很有用。 "heightStyle"属性是v1.10+的关键。 - Andrew

“刷新”解决了我的问题，因为在手风琴初始化后我正在加载内容。” - jyoseph

Answer 5

设置DIV的高度就可以解决问题。

$(document).ready(function() {

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

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

- Arun Banik

Answer 6

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

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

可能的取值：

1. "auto": 所有面板的高度将设置为最高面板的高度。
2. "fill": 根据手风琴父容器的高度，扩展到可用高度。
3. "content": 每个面板的高度仅限于其内容的高度。

- Vishal

Answer 7

关闭自动模式会起作用……（除了“auto”或“fill”之外的任何字符串），例如解决方案中提到使用“panel”。但是……

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

• http://api.jqueryui.com/accordion/#option-heightStyle
• https://github.com/jquery/jquery-ui/blob/master/tests/unit/accordion/options.js
• https://github.com/jquery/jquery-ui/blob/master/ui/widgets/accordion.js

jQuery UI 1.12中选项“heightStyle”的取值：

• "auto"：所有面板高度都将设置为最高面板的高度。
• "fill"：根据手风琴的父容器高度扩展到可用高度。
• "content"：每个面板的高度仅限于其内容。

Example: https://jsfiddle.net/qkxyodpq/5/

希望有所帮助。

- phyatt

---

这应该标记为答案，因为当前标记的答案https://dev59.com/83E85IYBdhLWcg3wUBoZ#2841187不再适用。 - D_K

Answer 8

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

- Munish Kumar

Answer 9

对我来说，以下操作精确无误。

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

});

- R T

Answer 10

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

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

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

- Robbert