Question

我正在使用JQUERY UI Accordion模块：

<script type="text/javascript">
$(function() {
    $("#sidebar_column_accordion").accordion({
        fillSpace: true,
        icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' }
    });
});
</script>

通过使用fillSpace选项，手风琴占据了我想要的窗口的整个高度。问题是它计算页面加载的高度，如果用户调整浏览器大小，它就不会调整......

当浏览器窗口调整大小时，有没有办法让手风琴重新计算高度/大小？

由于

Answer 1

$(window).resize(function(){
    $("#sidebar_column_accordion").accordion("resize");
});

在jQuery UI 1.9中，删除了resize方法。添加了更新的刷新方法，在这种情况下也可以使用。

$(window).resize(function(){
    $("#sidebar_column_accordion").accordion("refresh");
});

Answer 2

看起来这已更新为“刷新”

$(function() {
$( "#accordion" ).accordion({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});

Answer 3

在手风琴声明中设置自动高度：'内容'。这将使div使用内容的原始高度：

$('#accordion').accordion({
    autoHeight: 'content'
});

有关详细信息，请参阅此处：http://jqueryui.com/accordion/#no-auto-height

Answer 4

发布的其他解决方案对我来说不起作用，尽管它们很接近。

使用heightStyle：fill定义您的手风琴，如下所示：

j = [1 , 1 , 3]

创建一个计算和设置高度的函数。请注意，我必须同时执行两项操作，设置高度，然后在手风琴上调用refresh。没有对方，一个人不会工作。

$("#sidebar_column_accordion").accordion({
                  heightStyle: "fill"
                });

在页面加载和窗口调整大小时调用此函数。

function calculateHeight(){
  var height = $('#maincontent').height();  // Or whatever height you want
  $('#sidebar_column_accordion').height(height);
  $('#sidebar_column_accordion').accordion("refresh");
}

JQUERY UI手风琴调整窗口大小调整大小？

4 个答案: