Question

当用户按下“更多”时，我有一个向下扩展的div。 div的高度始终为auto，并相应地扩展以适合内容。

我需要保持“height：auto”以便CSS在屏幕调整大小时保持响应，但我希望更改高度动画...我应该怎么做？

换句话说，当用户按下更多并且将额外的内容添加到此div时，我希望div的扩展能够被动画化，而不指定像5em或任何其他任何高度。

<div id="expand">
    <p>This is the div I want to expand</p>
    <div id="hidden" style="display:none">
       <img />
       <img />
    </div>
</div>

知道了！我需要使用slideToggle方法而不是Thanks！

Answer 1

jsBin demo ＆lt; - 调整窗口大小。效果很好。

你可以这样做：

$('.more').click(function(){
  $("+ div", this).slideToggle();
});

具有：

<button class="more">MORE</button>
<div>Lorem Ipsum...</div>

_{我会使用您拥有的HTML，但这是您在问题中没有显示某些代码时的价格;）}

Answer 2

我不知道你是如何设置代码的，但jQuery

$(link).on("click", function() {
   $(element).slideToggle();
});

可能适合你。

这就是你要找的东西吗？

Answer 3

你可以随时：

var targetDiv = $('.targetDiv');
// get original Height
var originalHeight = targetDiv.height();
// get natural height
targetDiv.css({ height: 'auto'});
var naturalHeight = targetDiv.height();
// reset div to original height
targetDiv.css({height: originalHeight});
// animate to target height
targetDiv.animate({
   height: naturalHeight}, {
   duration: 1000,
   completion: function() {
      // set height to auto
      targetDiv.css({height: 'auto'});
   });

Answer 4

您可以使用jQuery执行此操作。您只需要计算height: auto绝对高度。

JSFiddle：http://jsfiddle.net/CS2h9/

jQuery - 如何使用height为auto设置动画：auto

4 个答案: