Javascript jQuery—；如何使用“高度：自动”设置div动画

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

我需要保持“高度：自动”，以便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方法，而不是谢谢

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

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

可能对你有用

这就是你想要的吗？

你可以随时：

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'});
   });

---

您可以使用jQuery来实现这一点。您只需计算

height:auto

绝对高度

---

JSFiddle:

slideToggle看起来像是一个可以工作的东西。我只是在问题中加入了一些示例代码。当用户按下“更多”时，它会将内部div的显示更改为block。现在如何格式化jQuery？@user3661646 HTML代码中的问题和您的愿望是，一旦打开

hidden

DIV，您将无法与内容->交互（进一步单击），因为父项将关闭。@user3661646是这样吗？应该触发的元素是什么？第一个

one？滑动切换看起来像是可以工作的东西。我只是在问题中加入了一些示例代码。当用户按下“更多”时，它会将内部div的显示更改为block。现在如何格式化jQuery？您的问题是什么？如果你能说得更具体些，我可以为你摆弄一把小提琴。哦，那太棒了。我希望当用户按“更多”时，内部div会展开，而当用户按“更少”时，div会崩溃。很抱歉，我的回复太晚了。。我接到一个电话。这是小提琴。如果你需要更多的帮助，请告诉我，或者这个基本的例子对你来说足够了吗？

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

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'});
   });