jQuery 手风琴高度：100%答案

【问题标题】：Jquery accordion height:100%jQuery 手风琴高度：100%
【发布时间】：2012-02-21 04:33:34
【问题描述】：

我希望创建一个手风琴风格的网站，其中包含 3 个菜单项，这些菜单项在展开时会填充 100% 的窗口。我可以找到很多不同的手风琴，但没有一个适合 height: 100%

有什么想法吗？

这是总体布局：

http://i.imgur.com/GLyTX.jpg

http://i.imgur.com/hOUrO.jpg

【问题讨论】：

标签： jquery height accordion

【解决方案1】：

在某些版本中，heightStyle: "content" 不起作用，因为 jquery.ui.js 不包含“heightStyle”变量，因此您可以在 jquery.ui.js 中手动设置默认变量。

在代码中查找：

$.extend( prototype.options, {
    heightStyle: null, // remove default so we fall back to old values
    ...
    .. some code ..
    ...
});

改为：

$.extend( prototype.options, {
    heightStyle: "content", // remove default so we fall back to old values
    ...
    .. some code ..
    ...
});

【讨论】：

【解决方案2】：

您可以使用 jQuery UI Accordion (demo) 做到这一点：

css

html, body  {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.accordion {
    height: 100%;
}

脚本

$(function(){

    $( ".accordion" ).accordion({ fillSpace: true });

    $(window).resize(function(){
        // update accordion height
        $( ".accordion" ).accordion( "resize" )
    });

});

对于较新版本的 jQuery UI Accordion (v1.12.1+)，将 heightStyle 设置为 fill，使用“刷新”更新并且将 html 和正文高度设置为 100% (demo)。

CSS

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

脚本

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

$(window).resize(function() {
  // update accordion height
  $(".accordion").accordion("refresh");
});

【讨论】：

【解决方案3】：

我使用 1.8.21 的 jquery-ui，heightStyle: "content" 对我不起作用。我通读了代码，找到了以下解决方案：

    $('.accordion').accordion({
        "autoHeight": false,
    });

【讨论】：

【解决方案4】：

我遇到了同样的问题，并且：

.collapse.in {
  height: 100%!important;
}

已修复，无需更多 javascript。

【讨论】：

【解决方案5】：

jQuery( "#accordion" ).accordion({
   collapsible: true,
   heightStyle: "content"
});

它会起作用，如果您使用的组合或小部件在选择后大小会增加，或者由于任何操作导致手风琴的大小增加，而不是通过处理该事件，您可以简单地调用以下命令；

jQuery( "#accordion" ).accordion( "resize" );

调整你的手风琴。

【讨论】：