jquery - 使用jquery根据父div高度动态更改子div高度

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>使用 jQueryslideUp()和slideDown()函数改变他的高度。

如果孩子<div>的身高大于父母，我需要将孩子的高度设置<div>为父母<div>。另外，当我在孩子中滑动时<div>，如果孩子的<div>身高slideUp()低于父母<div>的身高，我需要将孩子的高度设置<div>为他的当前高度。

提前致谢。

Answer 1

你可以试试下面的fiddle，看看结果是否符合预期（点击带下划线的文字看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});       

});