JQUERY UI Accordion 在窗口调整大小时调整大小？

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 中，删除了调整大小方法。添加了刷新方法，该方法更加稳健，并且在这种情况下也适用。

$(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

在手风琴声明中设置 autoHeight: 'content'。这将使 div 使用内容的原生高度：

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

请参阅此处了解更多信息： http:// /jqueryui.com/accordion/#no-auto-height

Answer 4

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

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

$("#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");
}

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

calculateHeight();

$(window).resize(function () {
  calculateHeight();
});