Question

jquery ui accordion自适应屏幕

我想让accordion在窗口大小改变的时候，也随着改变且最小height为400px。该怎么做
$("#accordion").accordion({
fillSpace: true
});
<style type="text/css">
.accordionbox{ width:213px;}
</style>
<div class="accordionbox">
<div id="accordion">
<h3><a href="#">单位场地</a></h3>
<div class="bg left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<h3><a href="#">对应梅沙通道</a></h3>
<div>
<p>
test1
</p>
</div>
<h3><a href="#">监控类型</a></h3>
<div>
<p>
test1
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">存储周期类型</a></h3>
<div>
<p>
test1
</p>
<p>
test1
</p>
</div>
<h3><a href="#">摄像机类型</a></h3>
<div>
<p>
test1
</p>
<p>
test1
</p>
</div>
</div>
</div>
重新刷新页面可以改变height后重新渲染，但是最大和最小化。。。
$(window).resize(function(){
accordionResize();
});
改变accordionbox的高度，并不会重新渲染

Answer 1

官网上提供了accordion的一些介绍，根据这些，能够实现当浏览器大小改变时，accordion自动适应其父元素的大小，并充满父元素。前提是，父元素的高度随浏览器动态改变。
代码：
window.onresize = function() {
autoHeight();
$("#permissionTree").accordion("resize");
}
$(function() {
autoHeight();
$("#permissionTree").accordion({
fillSpace: true
});
});
其中，后一个函数是实现浏览器第一次加载页面时，accordion的正常加载。fillspace:true使得其自动充满父元素。前一个函数实现了在窗口改变大小时，调用accordion的resize方法。其中的autoHeight（）函数用来控制页面其他元素（包括accordion的父元素）的大小。