1

根据我在 Stack 上找到的信息，我已经完成了以下操作，以将我的 div 的高度从设定高度设置为自动高度并返回。

$('.parent').each(function(){
    $(this).data('height',$(this).css('height'));
    $(this).css('height','20px');
});
$('.parent').click(function(){
    var el = $(this);
    if ($(this).css('height') == '20px') {
        $(this).css({
            height: $(this).data('height'),
            cursor: 'auto'
        });
        $(this).children('.closeButton').fadeIn();
    }
});
$('.closeButton').click(function(){
    var el = $(this).parent();
    var button = $(this);
    el.css('height','0');
    setTimeout(function(){
        el.css({
            height: '20px',
            cursor: 'pointer'
        });
        button.fadeOut();
    },150);
});
$('.makeBigger').click(function(){
   html = 'TONS OF CONTENT MAKES ME BIGGER<br/>TONS OF CONTENT MAKES ME BIGGER<br/>TONS OF CONTENT MAKES ME BIGGER<br/>';
   $('#bigger').append(html);
   $('#bigger').css('height','auto');
});

元素的 HTML 本质上是：

<div class="parent">
    <div class="closeButton">close</div>
    CONTENT
</div>

<div class="parent" id="bigger">
    <div class="closeButton">close</div>
    CONTENT
    <div class="makeBigger">EVEN BIGGER</div>
</div>

CSS：

.parent {
    background: red;
    overflow: hidden;
    cursor: pointer;
   margin: 30px;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
}
.closeButton {
    display: none;
    cursor: pointer;
    float: right;
}

http://jsfiddle.net/3uFaq/

这工作得很好。但是，我的一个 div 包含一些用户可以与之交互的表单字段，进而将更多数据附加到该 div。如何进一步为该 div 设置动画以使其更大？我已经尝试过广泛使用最大最小高度和其他东西，但没有找到合适的脚本组合来做到这一点。

4

0 回答 0