2

divのサイズを変更すると、影が元の位置に残ることがわかりました。ボタンをクリックすると、子 div の高さが変更され、親も高さが変更されますが、影は削除されません。

<script type="text/javascript">
    $(function () {
        // change width
        $('#btn1').toggle(function () {
            $('#div1').height(100);
        },
        function () {
            $('#div1').height(200);
        });
    });
</script>

 <style type="text/css">
    #div1
    {
        height: 200px;
    }
    #div2
    {
        width: 200px;
        box-shadow: 2px 2px 8px #000000;
        position: absolute;
        left: 200px;
        top: 200px;
    }
</style>

<body>
   <div id="div2">
    <div id="div1">
        <input type="button" id="btn1" value="test" />
    </div>
</div>

http://jsfiddle.net/edward44444/v2NmD/1/

4

1 に答える 1

0

簡単な回避策は、高さを設定する前と元に戻すときに影を削除することです。

CSS:

#div2.noshadow {
    box-shadow: none;
}

JS:

$(function() {
    $('#btn1').toggle(function() {
        $('#div2').addClass('noshadow');
        $('#div1').height(100);
        $('#div2').removeClass('noshadow');
    }, function() {
        $('#div1').height(200);
    });
});

http://jsfiddle.net/v2NmD/32/

于 2013-04-22T11:14:01.883 に答える