如何設置元素的高度與其內容相同？

Question

這裏是我的代碼：

$("#topbar").click(function() { 
 
    $(this).animate({ 
 
     height: ($(this).height() == 45) ? 20 : 45 
 
    }, 200); 
 
});

#topbar { 
 
    background: orange; 
 
    color: white; 
 
    display:block; 
 
    width:100%; 
 
    text-align:center; 
 
    height:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='topbar'> 
 
toggle me 
 
<br> 
 
some explanations 
 
<br> 
 
some more explanation 
 

 
</div>

正如你看到的，當你點擊橙色框，其高度將增加（反之亦然）。但是45對於當前內容來說還不夠高。其實這個盒子的內容是動態的。所以我想要設置一個與其內容高度相同的高度。

我該怎麼做？

Answer 1

如果height爲45或不是，則使用條件，然後將true指定爲20，對於false條件指定45。取而代之的是，按照下面的代碼 -

var collapse = false; 
 
$("#topbar").click(function() { 
 
    var ht = (collapse? 20 : this.scrollHeight); 
 
    collapse=!collapse; 
 
    $(this).animate({ 
 
     height: ht 
 
    },200); 
 
    
 
});

#topbar { 
 
    background: orange; 
 
    color: white; 
 
    display:block; 
 
    width:100%; 
 
    text-align:center; 
 
    height:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='topbar'> 
 
toggle me 
 
<br> 
 
some explanations 
 
<br> 
 
some more explanation 
 

 
</div>

Answer 2

這裏是解決方案。信貸給Jai。

$("#topbar").click(function() { 
 
    $(this).animate({ 
 
    height: ($(this).height() == 20) ? this.scrollHeight : 20 
 
    }, 200); 
 

 
});

#topbar { 
 
    background: orange; 
 
    color: white; 
 
    display: block; 
 
    width: 100%; 
 
    text-align: center; 
 
    height: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='topbar'> 
 
    toggle me 
 
    <br> some explanations 
 
    <br> some more explanation 
 
    <br> some more explanation 
 
    <br> some more explanation 
 
    <br> some more explanation<br> some more explanation 
 

 
</div>