Javascript 如何调整 jQuery UI 手风琴的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2841075/
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
How can you adjust the height of a jQuery UI accordion?
提问by KallDrexx
In my UI I have an accordion setup like this:
在我的用户界面中，我有一个这样的手风琴设置：
<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，而内容 div 无济于事。添加最小高度内的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?
即使没有足够的内容来填充这些部分，我如何从内容部分中获得合理的大小？
采纳答案by ICodeForCoffee
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: trueproperty 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
当您声明手风琴控件 div 时，您可以在 div 的样式标记中放置一个高度。然后，您可以设置fillSpace: true属性以强制手风琴控件无论如何填充该 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.
这意味着当您选择一个包含大量文本的区域时，手风琴会重新计算它。
回答by Keerigan
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
我还没有测试过这个，只是发现，当我有时间测试时会返回和删除这个评论
回答by Ben Coppock
From the docsit 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 });
回答by nullability
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: "fill"以获得预期的效果。
$(".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 refreshmethod:
如果您的页面尺寸动态变化并且您需要重新计算手风琴尺寸，您应该使用以下refresh方法刷新您的手风琴：
$(".selector").accordion("refresh");
This is preferred as the resizemethod is now deprecated.
这是首选resize方法，因为该方法现已弃用。
回答by Arun Banik
Setting the DIV's height will do the trick.
设置 DIV 的高度即可解决问题。
$(document).ready(function() {
$("#accordion").show().accordion({
autoHeight: false
});
$("#accordion div").css({ 'height': 'auto' });
});
回答by phyatt
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"你要找的是"content"。
- 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/ui/widgets/accordion.js
- 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/ui/widgets/accordion.js
(values for option "heightStyle"in jQuery UI 1.12)
（"heightStyle"jQuery UI 1.12 中选项的值）
"auto": All panels will be set to the height of the tallest panel."fill": Expand to the available height based on the accordion's parent height."content": Each panel will be only as tall as its content.
"auto"：所有面板都将设置为最高面板的高度。"fill"：根据手风琴的父高度扩展到可用高度。"content"：每个面板的高度与其内容一样高。
Example: https://jsfiddle.net/qkxyodpq/5/
示例：https: //jsfiddle.net/qkxydpq/5/
Hope that helps.
希望有帮助。
回答by Munish Kumar
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
},
回答by Vishal
Use heightStyleoption to control the height of the accordion and each panel.
使用heightStyle选项来控制手风琴和每个面板的高度。
$("#accordion").accordion({
heightStyle: "content"
});
Possible values:
可能的值：
- "auto": All panels will be set to the height of the tallest panel.
- "fill": Expand to the available height based on the accordion's parent height.
- "content": Each panel will be only as tall as its content.
- "auto"：所有面板都将设置为最高面板的高度。
- "fill"：根据手风琴的父高度扩展到可用高度。
- "content"：每个面板的高度仅与其内容一样高。
回答by Robbert
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 设置为 content 之前，它们从未完全正确地增大面板。
$("#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。
回答by R T
for me doing following worked accurately.
对我来说，以下工作准确无误。
$( "#accordion" ).accordion({
autoHeight: false,
});
});
