0

親に s を動的に$.append()ingしています。<div>position:absolute

absoluteで別のホバー上に親を表示<div>し$.animate({dimension: 'show')ます。

親は、ing中absoluteにその値を増やしません。height$.append()

親の をすべての子と等しくするにheightはどうすればよいでしょうか?absolute

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

この例では、の日付がed または月/年d$.append()になった後に、子が ed になります。datepickerselectchange

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

1 に答える 1

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');
}
于 2013-04-29T21:05:57.163 に答える