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>的高度。

在此先感謝。

來源

2013-04-26 user2160425

什麼都試過？ – 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});  

});

來源

2013-04-26 11:23:20 Gabriel

Dynamicaly改變孩子的div高度基於父DIV高度使用jQuery

回答

相關問題