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（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，使用“refresh”更新并设置html＆amp;身高达到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");
});

Answer 3

我使用1.8.21的jquery-ui，而heightStyle：“content”对我来说不起作用。我仔细阅读了代码，然后找到了以下解决方案：

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

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 ..
    ...
});

Answer 5

我有同样的问题，并且：

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

修复它，不需要更多的javascript。

Jquery手风琴高度：100％

5 个答案: