如何扩展容器div的高度，只要子div展开

在我的HTML页面中，我有几个<div> s，可以通过单击它们各自的链接进行扩展。我的要求是每当我点击该链接时，其父容器的大小必须增加到<div>的大小（就像手风琴的扩展一样）。如何扩展容器div的高度，只要子div展开

这是我已经试过：

$('.add-comment').click(function() { 
    $('div.extra').height($('div.extra').height() + $('div.stream-widgets-block-comment-box').height()); 
});

上面的语句添加<div>的身高，但问题是，因为它同时是越来越执行代码尚未展开，所以<div>“身高最终是-1。

编辑1：这是JSFiddle链接 - http://jsfiddle.net/R9uEh/1/ 我已经添加了单独的div，它在扩展时使用页面的高度。（需要点击添加注释以查看扩展）

来源

2014-04-22 user3458749

你能提供jsfiddle.net的例子吗？ –

你是什么意思“页面大小”？ –

@Nikolay：http://jsfiddle.net/R9uEh/ – user3458749

$('.add-comment').click(function() { 
    var vHeight = $('div.extra').height() + $('div.stream-widgets-block-comment-box').height(); 
    $('div.extra').css('height', vHeight); 
});

您可以使用.css（）和var。

来源

2014-04-22 08:55:23 GOdodgers

正如我上面提到的，$（'div.stream-widgets-block-comment-box'）。height（）是-1，因为代码在div展开之前得到执行。 :( – user3458749

这与OP的代码基本相同 –

使用setTimeout或回调函数..等等..这点延迟了有序函数。 – GOdodgers

试着这样做。

$('.add-comment').click(function(){ 
    var height = $('div.extra').height() + $('div.stream-widgets-block-comment-box').prop('scrollHeight'); 

    ('div.extra').height(height); 
});

来源

2014-04-22 09:13:55 janhocevar

未捕获TypeError：未定义不是函数是结果：| – user3458749

有一个语法错误：第四行在行首缺少'$'，另外，这与OP的代码基本相同，所以这肯定不起作用。 –

尝试打包stream-widgets-block-comment-box在另一个div中，并设置隐藏在其上的方式。这样scrollHeight属性将为stream-widgets-block-comment-box div返回适当的高度。 – janhocevar

如何扩展容器div的高度，只要子div展开

回答

相关问题