jQuery UI手风琴 - 每个面板适应其内容

Question

我正在使用jQuery UI的手风琴http://jqueryui.com/demos/accordion/，并尝试让它适应每个面板内容的高度。

目前的工作方式是适应最大的面板内容，但我想根据打开的面板来调整大小。

此外，有没有办法使一个面板默认打开而不是顶部的面板？我希望在用户加载页面时底部的面板打开。

提前感谢！

编辑：我尝试在.ui-accordion .ui-accordion-content-active中的jquery-ui.css文件中放置height:auto !important;，这确实起作用，但在关闭手风琴时会出现奇怪的问题，其中一个保持打开，而另一个正在打开。

- JacobTheDev

Answer 1

为了保持更新，在jquery UI版本1.9中，autoHeight选项已被heightStyle替代。http://api.jqueryui.com/accordion/#option-heightStyle。在1.9版本之后，使用方法是$( ".selector" ).accordion({ heightStyle: "content"});。autoHeight在大多数情况下仍然有效，但当我将autoHeight设置为false并且我的.ui-accordion-content包含高度设置为自动的图像时，在Chrome和Safari中遇到了困难，而在Firefox中则没有。改用heightStyle效果更好。

- Linds

---

截至2014年6月3日，在Firefox浏览器中经过测试，我无法使autoHeight起作用，但heightStyle运行良好。 - Daniel

autoHeight已被弃用（文档到处都是） - ford prefect

Answer 2

哦，我发现他们已经有了这个设置！http://jqueryui.com/demos/accordion/#no-auto-height

所以基本上，只需要这样做：$( ".selector" ).accordion({ autoHeight: false });

- JacobTheDev

Answer 3

这个问题比较老，但现在jQuery有一个选项可以根据内容设置高度。

更多信息请点击 http://api.jqueryui.com/accordion/#option-heightStyl

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

- iveedee

---

一个多余的括号 {heightStyle: "content" } 应改为 heightStyle: "content" - Clinton

Answer 4

这对我有用。

$(function () {
        $("#accordion").accordion({
            header: "h3",
            autoFill:true,
            autoHeight: false 
        });
    });

- dllhell