jQuery JQuery手风琴自动高度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11034756/
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 Accordion Auto Height issue
提问by Kim
I am using JQuery Accordion. I have this page here: http://www.hauppauge.com/site/support/support_colossus.html#tabs-6
我正在使用 JQuery 手风琴。我在这里有这个页面：http: //www.hauppauge.com/site/support/support_colossus.html#tabs-6
What happens is the Auto Height is taking some time to load, before it loads there is a lot of white space below the content. When it finally does load the height will expand to longer then snap up to the correct height of the content. Is there a way for this to be seamless? I just want to be able to click an Accordion tab and have it expand smoothly to the exact height of the content.
发生的情况是自动高度需要一些时间来加载，在加载之前内容下方有很多空白。当它最终加载时，高度将扩展到更长，然后捕捉到内容的正确高度。有没有办法做到这一点？我只是希望能够单击“手风琴”选项卡并让它平滑地扩展到内容的确切高度。
Update 08/08/2014:
2014 年 8 月 8 日更新：
Use heightStyle: "content"if you're using version 1.9 and higher(Tarun'sanswer)
使用heightStyle: "content"，如果你正在使用1.9版及更高版本（塔伦的答案）
Use autoHeight: falsefor 1.8 and lower(iappwebdev's answer)
使用autoHeight: false了1.8和更低（iappwebdev的答案）
采纳答案by iappwebdev
So why don't you just set autoheightto false?
那你为什么不设置autoheight为false呢？
$( ".selector" ).accordion({ autoHeight: false });
http://jqueryui.com/demos/accordion/#option-autoHeight
http://jqueryui.com/demos/accordion/#option-autoHeight
EDIT
编辑
Looking at your comment:
看了你的评论：
// Accordion
$("#accordion").accordion({ header: "h3" });
$("#accordion").accordion({ collapsible: true });
$("#accordion").accordion({ autoHeight: false, navigation: true });
You are initialising the accordion and then you add more options to it. Why are you doing that? Default value for autoHeightis true, so every tab gets a fixed height. Put all options in one call:
您正在初始化手风琴，然后向其添加更多选项。你为什么这样做？默认值autoHeight是true，所以每片获得一个固定的高度。一次调用所有选项：
// Accordion
$("#accordion").accordion({
header: "h3",
collapsible: true,
autoHeight: false,
navigation: true
});
EDIT
编辑
Regarding your 2nd comment:
关于您的第二条评论：
Have a look at http://jqueryui.com/demos/accordion/#option-header. You can see that option h3is set by default, so you don't have to set it in your call.
看看http://jqueryui.com/demos/accordion/#option-header。您可以看到该选项h3是默认设置的，因此您不必在通话中进行设置。
And you get an answer to your question here: JQuery accordion doesn't work without h3 tags.
您可以在这里得到问题的答案：JQuery 手风琴没有 h3 标签就不起作用。
It's pretty important to go through jQuery API to improve your knowledge. For jQuery API go to http://api.jquery.com/and for jQuery UI go to http://jqueryui.com/demos/. If you have any more questions, don't hesitate to ask afteryou tried to resolve your problem and afteryou did some research.
通过 jQuery API 来提高您的知识非常重要。对于 jQuery API，请访问http://api.jquery.com/，对于 jQuery UI，请访问http://jqueryui.com/demos/。如果您还有其他问题，请在尝试解决问题并进行一些研究后随时提出。
If all this answered your question, please mark it as correct answer.
如果所有这些都回答了您的问题，请将其标记为正确答案。
回答by Tarun Gupta
you should use
你应该使用
$("#accordion").accordion({
heightStyle: "content"
});
It will set height according to your content. and will not use blank space as height.
它将根据您的内容设置高度。并且不会使用空格作为高度。
回答by mithunSalinda
$("#accordion").accordion({
heightStyle: "content"
});
This is working in new version its worked for me !!!
这适用于新版本，对我有用！！！
回答by tsveti_iko
If nothing works so far, just resize the jQuery Accordion contentElement- it is called data-contentby default, unless you configured it differently:
如果到目前为止没有任何效果，只需调整 jQuery Accordion 的大小contentElement-data-content默认情况下会调用它，除非您对其进行了不同的配置：
$('.accordion').find('[data-content]').resize();
This would also work if you want to resize the Accordion after your data is loaded dynamically.
如果您想在动态加载数据后调整手风琴的大小，这也将起作用。
回答by Shweta
This worked for me.
这对我有用。
$( ".accordion" ).accordion({
autoHeight: false,
collapsible: true,
navigation: true
});
