jquery - 让绝对父母调整孩子的高度

Question

我正在动态地$.append()向<div>父母发送position:absolute电子邮件。

我向absolute父母展示了另一个悬停<div>在$.animate({dimension: 'show').

父母在ing时absolute不会增加它的' 。height$.append()

如何height使absolute父母的 等于所有的孩子？

http://jsfiddle.net/ZDfCv/3/

在这个例子中，孩子们$.append()在datepicker的日期是selected 或月/年changed 之后被 ed。

html

<div id="hoverAnchor" class="regularBorder">hover me</div>
<div id="hoverMe" class="outerBorder" style="display:none; position:absolute;">arbitrary text
    <div id="dateSelector"></div>
</div>
<div id="cloneMe" class="regularBorder" style="display:none">i have been cloned</div>

css

.regularBorder{
    border: 1px solid black;
}
.outerBorder{
    border: 2px solid red;
}

js

$(document).ready(function () {
    $("#hoverMe").position({
        of: $("#hoverAnchor"),
        my: "left top",
        at: "left bottom",
        collision: "fit none"
    });

    $.fn.appendGridSort = function(){
        var $myClone = $('#cloneMe').clone(false);
        $myClone.prop('id', null).prop('style',null);
        $("#hoverMe").append($myClone);
        $myClone.animate({
            height:'show',
            width:'show',
            opacity:'show'
        });
    }

    $("#dateSelector").datepicker({
        changeMonth: true,
        changeYear: true,  
        onChangeMonthYear: function(){
            $.fn.appendGridSort();
        },
        onSelect: function(){
            $.fn.appendGridSort();
        }
    });
    var _enter = false;
    $("#hoverAnchor").add($("#hoverMe")).mouseenter(function () {
        if (!_enter) {
            $("#hoverMe").stop(true, false).animate({
                height: 'toggle',
                opacity: 'toggle'
            }, 200);
        }
        _enter = true;
    }).mouseleave(function () {
        _enter = false;
        $("#hoverMe").stop(true, false).animate({
            height: 'toggle',
            opacity: 'toggle'
        }, 200);
    });
});

Answer 1

添加$("#hoverMe").css('height','auto');到您的$.fn.appendGridSort功能：

$.fn.appendGridSort = function(){
    var $myClone = $('#cloneMe').clone(false);
    $myClone.prop('id', null).prop('style',null);
    $("#hoverMe").append($myClone);
    $myClone.animate({
        height:'show',
        width:'show',
        opacity:'show'
    });
    $("#hoverMe").css('height','auto');
}