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

In my UI I have an accordion setup like this:

在我的UI中，我有一个像这样的手风琴设置：

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

    // More sections
</div>

The accordion works properly when it is first formed, and it seems to adjust itself well for the content inside each of the sections. However, if I then add more content into the accordion after the .accordion() call (via ajax), the inner for the section ends up overflowing.

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

Since the accordion is being formed with almost no content, all the inner divs are extremely small, and thus the content overflows and you get accordions with scrollbars inside with almost no viewing area.

由于手风琴的形成几乎没有任何内容，所以所有的内部div都非常小，因此内容溢出，你手里拿着带有滚动条的手风琴，几乎没有观看区域。

I have attempted to add min-height styles to the object_list div, and the content divs to no avail. Adding the min-height to the inner divs kind of worked, but it messed up the accordion's animations, and adding it to the object_list div did absolutely nothing.

我试图将最小高度样式添加到object_list div，并且内容divs无效。将min-height添加到内部div有点奏效，但它搞砸了手风琴的动画，并将它添加到object_list div完全没有。

How can I get a reasonable size out of the content sections even when there is not enough content to fill those sections?

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

10 个解决方案

#1

When you declare the accordion control div, you can put a height in the style tag for the div. Then you can set the fillSpace: true property to force the accordion control to fill that div space no matter what. This means you can set the height to whatever works best for you page. You could then change the height of the div when you add your code

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

If you want the accordion to dynamically resize to the content it contains as needed you can do the following trick posted on the jQuery UI website.

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

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

This means when you select an area with a lot of text, the accordion will recalculate it.

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

#2

autoHeight was deprecated in 1.9, and removed in 1.10.

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

Use:

使用：

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

to auto size your inner div.

自动调整你的内部div。

UPDATE:

更新：

I see that this is still quite an active post, so I decided to make sure my answer is still valid. It looks like this may no longer work in jQuery UI 1.11. It notes that the [content] property has been deprecated, and to use [panel] instead. Making the code snippet now look something more like this:

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

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

I HAVE NOT YET TESTED THIS, JUST FOUND, AND WILL RETURN AND REMOVE THIS COMMENT WHEN I HAVE TIME TO TEST

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

#3

From the docs it sounds like you'll need to set

从文档中听起来你需要设置

clearStyle: true

...and also

...并且

autoHeight: false

I believe that using clearStyle allows you to dynamically add content without Accordion getting in the way.

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

So try this...

试试这个......

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

#4

It looks like all the answers here are now using deprecated options.

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

With the latest version of jQuery UI (1.10.x), you should initialize your accordion with heightStyle: "fill" to get the intended effect..

使用最新版本的jQuery UI（1.10.x），您应该使用heightStyle初始化您的手风琴：“填充”以获得预期效果。

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

You can read more at the jQuery UI API docs here: http://api.jqueryui.com/accordion/#option-heightStyle

您可以在jQuery UI API文档中阅读更多内容：http：//api.jqueryui.com/accordion/#option-heightStyle

If your page dimensions change dynamically and you need to recalculate your accordion size, you should refresh your accordion using the refresh method:

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

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

This is preferred as the resize method is now deprecated.

这是首选，因为现在不推荐使用resize方法。

#5

Setting the DIV's height will do the trick.

设置DIV的高度就可以了。

$(document).ready(function() {

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

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

#6

In your jquery-ui.js search for the following section and change heightstyle: "auto" to heightstyle: "content" so the updated file will look like this.

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

#7

Turning off auto will work... (with any string besides auto or fill) such as the solution telling to use "panel". But...

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

That is the same as putting in any garbage string for "heightStyle". The "heightStyle" you are looking for is "content".

这与为“heightStyle”添加任何垃圾字符串相同。您正在寻找的“heightStyle”是“内容”。

http://api.jqueryui.com/accordion/#option-heightStyle
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/tests/unit/accordion/options.js
https://github.com/jquery/jquery-ui/blob/master/ui/widgets/accordion.js
https://github.com/jquery/jquery-ui/blob/master/ui/widgets/accordion.js

(values for option "heightStyle" in jQuery UI 1.12)

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

"auto": All panels will be set to the height of the tallest panel.
“auto”：所有面板都将设置为最高面板的高度。
"fill": Expand to the available height based on the accordion's parent height.
“fill”：根据手风琴的父高度扩展到可用高度。
"content": Each panel will be only as tall as its content.
“内容”：每个面板只会与其内容一样高。

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

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

Hope that helps.

希望有所帮助。

#8

Just call the accordions .resize() method, this will recalculate its size. http://docs.jquery.com/UI/Accordion#method-resize

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

#9

I recently set up an accordion that retrieves content via ajax when a tab is activated and ran into the same problem. I tried using some of the suggestions posted here, but they never quite grew the panel correctly until I set the heightStyle to content.

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

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

I'm using jQuery-UI version 1.10.4.

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

#10

for me doing following worked accurately.

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

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

});

}）;

#1