javascript - jQuery — 如何使用高度 :auto 为 div 设置动画

Question

我有一个 div，它会在用户按下“更多”时向下扩展。 div 的高度始终是自动的，并相应地扩展以适应内容。

我需要保留“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 方法而不是谢谢!

Answer 1

jsBin demo <-- 调整窗口大小。效果很好。

你可以像这样简单地做到这一点:

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

拥有:

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

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