Jquery手风琴高度:100%

Question

我正在寻找创建一个手风琴风格的网站,其中包含3个菜单项,在展开时填充100%的窗口.我可以找到很多不同的手风琴,但没有一个可以正常使用高度:100%

有任何想法吗？

这是一般布局:

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

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

Answer 1

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

它会起作用,如果您正在使用一些组合或小部件,其大小在选择后增加或由于任何动作,手风琴的大小增加而不是处理该事件,您可以简单地调用以下内容;

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

调整你的手风琴.

Answer 2

您可以使用jQuery UI Accordion(演示)执行此操作:

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,使用"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");
});