如何擴展容器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展開

回答

相關問題