javascript jQuery UI Accordion - 每个面板都适合内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6654045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Accordion - Each Panel Fit To Contents
提问by JacobTheDev
I'm using jQuery UI's Accordion http://jqueryui.com/demos/accordion/and I'm trying to get it to fit the height of each panels contents.
我正在使用 jQuery UI 的 Accordion http://jqueryui.com/demos/accordion/，我试图让它适合每个面板内容的高度。
The way it currently works is to fit the largest panels contents, but I would like it to resize based on which panel is open.
它目前的工作方式是适应最大的面板内容，但我希望它根据打开的面板调整大小。
Also, is there a way to make one panel open instead of the top one by default? I'd like to have the bottommost panel open when the user loads the page.
另外，有没有办法在默认情况下打开一个面板而不是顶部面板？我希望在用户加载页面时打开最底部的面板。
Thanks in advance!
提前致谢！
EDIT: I've tried putting height:auto !important;in the jquery-ui.css file on .ui-accordion .ui-accordion-content-activewhich does work, but results in a weird issue when closing an accordion, where one stays open while the other is opening.
编辑：我试过放入height:auto !important;jquery-ui.css 文件.ui-accordion .ui-accordion-content-active，但在关闭手风琴时会导致一个奇怪的问题，一个打开而另一个打开。
采纳答案by JacobTheDev
Ahh, found out they just have a setting for this! http://jqueryui.com/demos/accordion/#no-auto-height
啊，发现他们只有一个设置！http://jqueryui.com/demos/accordion/#no-auto-height
So basically, just do this: $( ".selector" ).accordion({ autoHeight: false });
所以基本上，只需这样做： $( ".selector" ).accordion({ autoHeight: false });
回答by Linds
To keep things current, it seems that for jquery UI version 1.9, the autoHeight has been replaced by heightStyle. http://api.jqueryui.com/accordion/#option-heightStyle
为了保持最新状态，似乎对于 jquery UI 1.9 版，autoHeight 已被 heightStyle 取代。 http://api.jqueryui.com/accordion/#option-heightStyle
The way to do this after 1.9 would be $( ".selector" ).accordion({ heightStyle: "content"});
在 1.9 之后执行此操作的方法是 $( ".selector" ).accordion({ heightStyle: "content"});
autoHeight still works under most circumstances, but I ran into difficulties in Chrome and Safari but not Firefox when I used autoHeight: false and my .ui-accordion-content included an image whose height was set to auto. Using heightStyle instead worked much better.
autoHeight 在大多数情况下仍然有效，但是当我使用 autoHeight: false 并且我的 .ui-accordion-content 包含一个高度设置为 auto 的图像时，我在 Chrome 和 Safari 中遇到了困难，但在 Firefox 中没有。使用 heightStyle 效果更好。
回答by iveedee
Question is fairly old but now jQuery has option to set the height as per the content. More information here: http://api.jqueryui.com/accordion/#option-heightStyl
问题相当古老，但现在 jQuery 可以选择根据内容设置高度。更多信息在这里：http: //api.jqueryui.com/accordion/#option-heightStyl
$(function () {
$("#accordion").accordion({
{heightStyle: "content" }
});
});
回答by dllhell
this working for me
这对我有用
$(function () {
$("#accordion").accordion({
header: "h3",
autoFill:true,
autoHeight: false
});
});
