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

Posted 2021-03-31

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

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

答案

声明accordion控制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 );

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

另一答案

对我来说，做以下工作准确。

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

});

另一答案

autoHeight在1.9中被弃用，并在1.10中删除。

使用：

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

自动调整你的内部div。

更新：

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

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

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

另一答案

From the docs听起来你需要设置

clearStyle: true

...并且

autoHeight: false

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

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

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

另一答案

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

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

另一答案

设置DIV的高度就可以了。

$(document).ready(function() {

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

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

另一答案

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

另一答案

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

这与为"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"：每个小组的内容都与其内容一样高。

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

希望有所帮助。

另一答案

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

另一答案

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

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

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