Question

我在根据父<div>身高

动态更改子<div>身高时遇到问题

以下是示例

<div id="parent" style="height:600px">
<div id="children"></div>
</div>

和js

var mapWidth = $("#parent").height() - 50; 
var sidebarWith = $("#children").height();

if (sidebarWith > mapWidth) { 
     $("#children").height(mapWidth);
} else {
     $("#children").height(sidebarWith); 
}

父级<div>已设置固定高度，但子级<div>使用jQuery slideUp()和slideDown()函数更改其高度。

如果孩子<div>身高超过父亲，我需要将孩子<div>的身高设置为父<div>。此外，当我在儿童<div>中滑动，如果<div>之后的儿童slideUp()身高低于父<div>身高，我需要将儿童<div>的身高设置为他的身高{{1}}当前的高度。

提前致谢。

Answer 1

您可以尝试使用以下小提琴，看看结果是否符合预期（点击带下划线的文字查看t）：http://jsfiddle.net/gabi/uHnKs/

请注意，slideUp（）首先将元素的高度降低为0并隐藏它，您可以看到幻灯片上的闪烁。您可能希望使用animate（）并更改元素的高度：

$('#children p').on('click', function() {

    var cHeight = $('#children').height() + 'px';

    if ($('#children').height() > $("#parent").height() - 50) { 
         cHeight = ($("#parent").height() - 50) + 'px'; 
    } 

    $('#children').animate({'height' : cHeight});       

});

使用jquery基于父div高度动态更改子div高度

1 个答案: