Question

在我的HTML页面中，我有一些<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，在扩展时使用了页面的高度。（需要点击添加评论来检查扩展）

Answer 1

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

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

Answer 2

尝试这样做。

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

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

扩展子div时如何扩展容器div的高度

2 个答案: