Я использую расширение chrome, чтобы свернуть некоторые разделы на веб-страницах. И все работает очень хорошо. Я сделал это так, чтобы он имел высоту 50 пикселей, и когда вы наводите на него курсор, он становится такой высотой, как обычно. Короче говоря, это мой код:
Это работает как шарм. Но!!! Когда div загружает дополнительный контент, он становится длиннее. В любом случае я могу установить максимальную высоту как предпочтительную высоту элемента? Я знаю, что просто не могу использовать max-height, но я хочу использовать css3-переходы, чтобы div расширялся постепенно.
Использовать element.scrollHeight
Вот пример
<script>
function collapse(target) {
target.style.maxHeight = '50px';
}
function expand(target) {
target.style.maxHeight = target.scrollHeight + 'px';
}
</script>
<style>
#test {
max-height: 50px;
background:lightgray;
overflow: hidden;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
</style>
<div id="test" onmouseover="expand(this)" onmouseout="collapse(this)">
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>
</div>
Не могли бы вы просто установить max-height: none
при падении?