要素の高さをコンテンツと同じように設定するにはどうすればよいですか？ここ

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

身長が45の場合は条件を使用していて、真の場合は20、偽の場合は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

は、ソリューションです。クレジットはジャイに行く。

$("#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>