Jquery 手风琴高度：100%

Question

我希望创建一个手风琴风格的网站，其中包含 3 个菜单项，展开时可填充 100% 的窗口。我可以找到很多不同的手风琴，但没有一个能在高度上正常工作：100%

有什么想法吗？

这是总体布局：

https://i.sstatic.net/6kJjY.jpg

https://i.sstatic.net/dOLtL.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 &身体高度为 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");
});

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。