Dynamicaly改变孩子的div高度基于父DIV高度使用jQuery

问题描述：

我有问题，动态变化的患儿<div>高度基于父<div>高度Dynamicaly改变孩子的div高度基于父DIV高度使用jQuery

这里是例子

<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>改变他的身高usi ng jQuery slideUp()和slideDown()函数。

如果孩子<div>身高大于父母我需要设置子女身高<div>父母<div>。另外，当我slideUp在儿童<div>，如果儿童<div>高度后slideUp()是较低的父母<div>身高我需要设置他的当前高度的儿童<div>的高度。

在此先感谢。

什么都试过？ – rahularyansharma 2013-04-26 08:11:24

你有试过什么吗？你可以做一个[jsfiddle]（http://jsfiddle.net）？ – soyuka 2013-04-26 08:11:40

而不是发表评论编辑您的问题，请。 – rahularyansharma 2013-04-26 08:25:18

答

你可以试用一下下面的小提琴，看看是否如预期的结果（点击带下划线的文本，看看T）：http://jsfiddle.net/gabi/uHnKs/

注意，效果基本show（）首先降低了元件的高度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});  

});

Dynamicaly改变孩子的div高度基于父DIV高度使用jQuery

相关推荐