如何调整jQuery UI手风琴的高度？ [英] How can you adjust the height of a jQuery UI accordion?

问题描述

在我的UI中，我有一个这样的手风琴设置：

In my UI I have an accordion setup like this:

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

手风琴在首次成型时工作正常，似乎可以很好地适应内部的内容每个部分。但是，如果我在.accordion（）调用之后（通过ajax）在手风琴中添加更多内容，则该节的内部最终会溢出。

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.

自手风琴以来正在形成几乎没有内容，所有的内部div都非常小，因此内容溢出，你手里拿着带有滚动条的手风琴，几乎没有观看区域。

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.

我试图将最小高度样式添加到object_list div，内容divs无效。将min-height添加到内部div中是有效的，但它搞砸了手风琴的动画，并将它添加到object_list 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.

我怎么能即使没有足够的内容来填充这些部分，也可以从内容部分中获得合理的大小？

How can I get a reasonable size out of the content sections even when there is not enough content to fill those sections?

推荐答案

当你声明手风琴控制div，你可以在div的样式标签中加一个高度。然后你可以设置 fillSpace：true 属性来强制手风琴控件填充div空间，无论如何。这意味着您可以将高度设置为最适合您的页面。然后，您可以在添加代码时更改div的高度

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: true property 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

如果您希望手风琴根据需要动态调整其包含的内容，您可以执行以下操作发布在jQuery UI网站上。

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.

//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.

这篇关于如何调整jQuery UI手风琴的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！