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

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

声明accordion控制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方法现已弃用.