Question

我动态$.append() <div> position:absolute为absolute个父母。

我使用<div>在另一个$.animate({dimension: 'show')的鼠标悬停时显示absolute个父级。

height父级在$.append()时不会增加其height。

如何使absolute父母的$.append()与所有孩子相等？

在此示例中，datepicker的日期为select或月/年change d后，子<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>为.regularBorder{ border: 1px solid black; } .outerBorder{ border: 2px solid red; }。

HTML

$(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);
    });
});

CSS

{{1}}

JS

{{1}}

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');
}

让绝对父母调整孩子的身高

1 个答案: