Question

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块中掉出来！ :(为什么？我如何解决？

Answer 1

jQuery UI resizeable是在调整大小后设置元素的高度，因此容器的大小是固定的，不会适应手风琴的高度变化。

您可以使用此功能将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'});
})

Answer 2

尝试使用resizable的resize事件来调用：

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

我如何修复可调整块内的手风琴？

2 个答案: