Question

我想制作一个可以通过点击按钮扩展高度的盒子。该框默认显示3行文本。（可以说......高度是50px并且溢出隐藏）

当我点击＆＃34;更多＆＃34;按钮，将框文本设置为滑动动画。再次单击“向上滑动”。

此外，我想滑到＆＃34; auto＆＃34;高度！！（Slidedown取决于内容高度）我尝试了很多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
        });
    ));
));

jquery切换自动高度

1 个答案: