jquery - jquery切换自动高度

Question

我想制作一个可以通过单击按钮扩展高度的框。默认情况下，该框仅显示 3 行文本。（可以说.. 高度为 50px 并且溢出隐藏）

当我单击“更多”按钮时，将框文本动画化为向下滑动。再次单击以向上滑动。

我也想滑到“自动”高度！！（滑动取决于内容高度）我尝试了许多 jquery 示例，但都失败了。有人帮我吗？

这是我的代码...

<div class="cmCnt">
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
AAA<br>
</div>


<a href="#" class="btnMore">more</a>


.cmCnt { height:50px;  overflow:hidden; }

Answer 1

啊，这是我几年前遇到的一个问题……我的解决方案是从没有特殊样式（即auto高度、visible溢出）开始，然后使用 javascript 存储元素的完整高度。接下来，将高度更改为 50px 并在页面加载后溢出到隐藏（没有过渡）。现在，您知道全高是多少，并且可以随意对其进行动画处理。

像这样的东西：

$(document).ready(function() {
    $('.cmCnt').each(function() {
        var $this = $(this);
        $this.data('originalHeight', $(this).height();
        $this.css({'height': '50px', 'overflow': 'hidden'});
        $this.click(function() {
            var newHeight = $this.data('originalHeight');
            // animate $this to newHeight however you like here
        });
    ));
));