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

Question

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

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

    // More sections
</div>

手风琴在第一次形成时可以正常工作，并且它似乎可以很好地适应每个部分内的内容。但是，如果我在 .accordion() 调用（通过 ajax）之后向手风琴中添加更多内容，则该部分的内部最终会溢出。

由于手风琴是在几乎没有内容的情况下形成的，因此所有内部 div 都非常小，因此内容会溢出，并且您会得到内部带有滚动条的手风琴，几乎没有查看区域。

我尝试将最小高度样式添加到 object_list div，但内容 div 无济于事。将 min-height 添加到内部 div 有点有效，但它弄乱了手风琴的动画，并将其添加到 object_list div 绝对没有任何作用。

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

Answer 1

autoHeight 在 1.9 中已弃用，并在 1.9 中删除。 com/upgrade-guide/1.10/" rel="noreferrer">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 的高度

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

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

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

Answer 3

从文档听起来你需要设置

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

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

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

可能的值：

1. “auto”：所有面板都将设置为最高面板的高度。
2. “fill”：根据手风琴的父级高度扩展到可用高度。
3. “内容”：每个面板的高度取决于其内容。

Answer 7

关闭自动功能将起作用...（使用除自动或填充之外的任何字符串），例如告诉使用“面板”的解决方案。但是...

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

• http://api.jqueryui.com/accordion/#option-heightStyle
• < a href="https://github.com/jquery/jquery-ui/blob/master/tests/unit/accordion/options.js" rel="nofollow noreferrer">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

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

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

示例：
https://jsfiddle.net/qkxyodpq/5/

希望有所帮助。

Answer 8

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

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

});

Answer 9

在 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 10

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

Answer 11

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

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

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