0

我有<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>为他的当前高度。

提前致谢。

4

1 回答 1

0

你可以试试下面的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});       

});
于 2013-04-26T11:23:20.760 回答