我如何在可調整大小的塊內部修復手風琴？

This代碼工作：我如何在可調整大小的塊內部修復手風琴？

<!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>&bull;&nbsp;Proin eget urna.</span> 
      <span>&bull;&nbsp;Nunc fringilla neque vitae odio.</span> 
      <span>&bull;&nbsp;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>

但問題是：

當我第一次調整塊，然後用手風琴 - 手風琴塊掉下來resizeble塊！？:(爲什麼我該如何解決

來源

2012-02-25 DrStrangeLove

嘗試使用調整的可調整大小的情況下調用：

$('#accord').accordion('destroy').accordion( options);

來源

2012-02-25 22:58:35 charlietfl

jQuery UI的調整大小的調整大小後設置元素的高度，因此容器的大小是固定的，不會適應手風琴的高度變化

您可以使用它來切換到height這樣min-height容器將被調整後的手風琴成長：

$('#main').bind('resizestart', function() { 
    $(this).css('min-height', '0px'); 
}); 

$('#main').bind('resizestop', function() { 
    $(this).css({'min-height': $(this).css('height'), 'height': 'auto'}); 
})

來源

2012-02-26 00:52:26 tomtastico

我如何在可調整大小的塊內部修復手風琴？

回答

相關問題