Javascript 如何在可调整大小的块内固定手风琴？
代码工作：Javascript 如何在可调整大小的块内固定手风琴？,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,代码工作： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#main').resizable({
ghost: true,
helper: 'border_accord'});
/*$('#accord p').hide();
$('#accord h3').toggle(function(){
$(this).addClass('h3_click');
$(this).next('p').slideDown().siblings('p:visible').slideUp();
$(this).siblings('h3').removeClass('h3_click');},
function(){
$(this).removeClass('h3_click').next('p').slideUp();
});*/
$('#accord').accordion({collapsible:true,active:false});
$('button#yes').bind("click",function(){
$( "#accord" ).accordion( "option", "disabled", true );
});
$('button#no').bind("click",function(){
$( "#accord" ).accordion( "option", "disabled", false );
});
});
</script>
<script type="text/javascript">
</script>
<style type="text/css">
*, html, body{
padding:0px; margin:0px;}
#main{
width:200px;
min-height:200px;
background-color:#e9e9e9;
padding:10px;}
#header{
height:22px;
background-image:url(images/bg_header.png);
border:1px solid #C90;
color:#FFF;
text-align:center;
font-size:18px;
font-weight:bold;
padding-top:3px;}
#accord h3{
height:25px;
border-radius:5px;
border:1px solid #ccc;
background-image:url(images/bg_h3.png);
margin-top:1px;
margin-bottom:1px;
text-align:center;
font-size:14px;
color:#6699CC;
padding-top:5px;
cursor:pointer;}
#accord p{
min-height:100px;
border-radius:5px;
border:1px solid #ccc;
padding:10px;
color:#333;}
#accord p span{
display:block;
margin-left:5px;
margin-top:5px;}
.button_size{
width:85px;
height:25px;
margin-top:5px;}
#accord h3:hover{
background-image:url(images/hover.png);
border:1px solid #FC6;
color:#F96;}
#accord .h3_click{
background-image:url(images/h3_cl.png);
border-top:1px solid #FC6;
border-right:1px solid #FC6;
border-left:1px solid #FC6;
color:#F96;}
.border_accord{
border:1px dashed #999;}
</style>
<title>Ex</title>
</head>
<body>
<div id="main">
<h3 id="header" class="ui-widget-header">Resizable</h3>
<div id="accord">
<h3>Layer1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Layer2</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Layer3</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.</p>
<h3>Layer4</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<span>• Proin eget urna.</span>
<span>• Nunc fringilla neque vitae odio.</span>
<span>• Vivamus vitae ligula.</span>
</p>
</div>
<button class="button_size" id="yes">F</button>
<button class="button_size" id="no">A</button>
</div>
</body>
</html>
$（文档）.ready（函数（）{
$（'#main'）。可调整大小({
鬼：是的，
助手：'边界协议'}）；
/*$（'#accord p'）.hide（）；
$（'#accord h3'）。切换（函数（）{
$（this.addClass（'h3_click'）；
$（this.next（'p'）.slideDown（）.sides（'p:visible'）.slideUp（）；
$（this）.this（'h3'）.removeClass（'h3_click'）；}，
函数（）{
$（this）.removeClass（'h3_click'）.next（'p'）.slideUp（）；
});*/
$（'#accord'）。手风琴（{可折叠：真，活动：假}）；
$（'button#yes'）。绑定（“单击”，函数（）{
美元（“#协议”）。手风琴（“选项”、“禁用”，真）；
});
$（'button#no'）。绑定（“单击”，函数（）{
美元（“#协议”）。手风琴（“选项”，“禁用”，假）；
});
});
*，html，body{
填充：0px；边距：0px；}
#主要{
宽度：200px；
最小高度：200px；
背景色：#e9e9e9；
填充：10px；}
#标题{
高度：22px；
背景图片：url（images/bg_header.png）；
边框：1px实心#C90；
颜色：#FFF；
文本对齐：居中；
字号：18px；
字体大小：粗体；
填充顶部：3px；}
#协议h3{
高度：25px；
边界半径：5px；
边框：1px实心#ccc；
背景图片：url（images/bg_h3.png）；
页边顶部：1px；
边缘底部：1px；
文本对齐：居中；
字体大小：14px；
颜色：#6699CC；
垫面：5px；
游标：指针；}
#协议p{
最小高度：100px；
边界半径：5px；
边框：1px实心#ccc；
填充：10px；
颜色：#333；}
#雅阁p档{
显示：块；
左边距：5px；
页边距顶部：5px；}
.按钮尺寸{
宽度：85px；
高度：25px；
页边距顶部：5px；}
#协议h3：悬停{
背景图片：url（images/hover.png）；
边框：1px实心#FC6；
颜色：#F96；}
#协议.h3\u点击{
背景图片：url（images/h3_cl.png）；
边框顶部：1px实心#FC6；
右边框：1px实心#FC6；
左边框：1px实心#FC6；
颜色：#F96；}
·边界协定{
边框：1px虚线#999；}
前任
可调整大小
第1层
Lorem ipsum dolor sit amet，是一位杰出的领导者。Morbi malesuada，feugiat tincidunt的赌注，enim massa gravida metus，commodo lacinia massa diam vel eros。普罗因·埃吉特·乌尔纳。努克·弗林吉利亚·内克·维塔·奥迪奥。活舌苔
第二层
Lorem ipsum dolor sit amet，是一位杰出的领导者。Morbi malesuada，feugiat tincidunt的赌注，enim massa gravida metus，commodo lacinia massa diam vel eros。普罗因·埃吉特·乌尔纳。努克·弗林吉利亚·内克·维塔·奥迪奥。活舌苔
三层
Lorem ipsum dolor sit amet，是一位杰出的领导者。Morbi malesuada，feugiat tincidunt的赌注，enim massa gravida metus，commodo lacinia massa diam vel eros。普罗因·埃吉特·乌尔纳。努克·弗林吉利亚·内克·维塔·奥迪奥。活舌苔
第四层
Lorem ipsum dolor sit amet，是一位杰出的领导者。
&公牛；普罗因·埃吉特·乌尔纳。
&公牛；努克·弗林吉利亚·内克·维塔·奥迪奥。
&公牛；活舌苔。
F
A.
当我第一次调整块的大小，然后使用手风琴-手风琴块从resizeble块中掉出来！：（为什么？如何修复？尝试使用Resizeable的resize事件调用：
$('#accord').accordion('destroy').accordion( options );
jQuery UI resizeable在调整大小后设置元素的高度，因此容器的大小是固定的，不会适应手风琴的高度变化 您可以使用此选项将
高度最小高度$('#main').bind('resizestart', function() {
$(this).css('min-height', '0px');
});
$('#main').bind('resizestop', function() {
$(this).css({'min-height': $(this).css('height'), 'height': 'auto'});
})