javascript - 向下滑动到正常宽度？

Question

我有一个div盒子，里面有很多p标签，而且很长。

所以我在框的顶部添加了一个show more文本。

盒子有一个height: 100px; overflow: hidden;，但是当有人点击时show more，我想把它放到slideDown盒子里，得到正常的，如果没有设置height它会有的。height: 100px;

知道怎么做吗？

我尝试了以下方法：（注意，盒子有类.show-limited-content和show more有类.show-more）

$('.show-more').live("click", function() {
    $('.show-more').live("click", function() {
        $('.show-limited-content').slideDown("slow");
    }); 
    return false;
});

Answer 1

您可以使用动画方法。

根据您的 html 的编写方式，它看起来类似于以下内容：

$('.show-more').on("click", function() {  
    $('.show-limited-content').animate({
        height: '500px'
      }, 2000);    
      return false;
  });

请参阅此工作示例以查看它的实际效果。

如果您需要动态高度，只需添加

var curHeight = $('.show-limited-content').height();

  $('.show-limited-content').css('height', 'auto');

  var autoHeight = $('.show-limited-content').height();

  $('.show-limited-content').height(curHeight);

在事件处理程序上方并将动画 css 更改为

height: autoHeight

这是另一个例子。