Jquery手风琴高度：100%

Question

我想创建一个手风琴式的网站，其中有3个菜单项，当展开时占据窗口的100%。我可以找到很多不同的手风琴，但没有一个能够与height: 100%正常工作。

有什么想法吗？

以下是一般布局：

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

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

- Craig Jonathan Kristensen

Answer 1

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

它将起作用，如果您正在使用某些组合框或小部件，在选择后或由于任何操作而导致手风琴的大小增加，则可以通过处理该事件来简单地调用以下内容;

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

调整您的手风琴。

- Imran Butt

Answer 2

您可以使用jQuery UI Accordion（演示）来实现此操作：

css

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

.accordion {
    height: 100%;
}

script

$(function(){

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

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

});

对于较新版本的jQuery UI折叠面板（v1.12.1+），请将heightStyle设置为fill，使用“refresh”进行更新，并将html和body的高度设置为100％（演示）。

CSS

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

脚本

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

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

- Mottie

Answer 3

我使用的是jquery-ui的1.8.21版本，但heightStyle: "content"对我没有起作用。我仔细阅读了代码并找到了以下解决方案：

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

- Marek Kowalski

Answer 4

在某些版本中，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 ..
    ...
});

- Manvel

Answer 5

我也遇到了同样的问题，然后：

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

已修复，不需要更多的JavaScript。

- Labanino