JQuery，在先前设置高度后将 div 高度调整为新内容

Question

我有一个 DIV 元素，其初始高度为 0，溢出的 o 的不透明度被隐藏，并且其中包含一些内容。

<div style='height: 0px; opacity: 0px; display: none; overflow: hidden; border: 1px solid #000;' id='mydiv'>
    Some Content<br><br>
    Lots or more content
    <br><br><br><br>
    hello world and stuff
</div>

当您单击一个按钮时，我正在将此 DIV 淡入视图，将其淡入视图的代码在函数内部，如下所示：

function fadediv(){
    mycontentheight=$('$mydiv')[0].scrollHeight;
    $('$mydiv').
        css('display','block').
        animate({opaicty:1,height:mycontentheight},100);
}

但后来我想从 DIV 中添加或删除一些内容，例如：

document.getElementById('mydiv').innerHTML += 'Some more content...';

当我添加新内容或删除一些内容时，div 的高度不会改变，这是我所期望的。在上面的函数中设置了 jquery 并且我将溢出设置为隐藏，所以更多的内容将在元素的溢出中，这是有道理的。

但我想将 div 的高度更改为新内容的高度，但我不知道该怎么做。我已经尝试了以下但它不起作用：

function addtodiv(){
    document.getElementById('mydiv').innerHTML += 'Some more content...';
    mycontentheight=$('$mydiv')[0].scrollHeight;
    $('$mydiv').
        animate({opaicty:1,height:mycontentheight},100);
}

上面的函数将新内容添加到 div，很好，但是它没有将 div 的高度更新为新内容的高度。

我做错了什么吗？我错过了什么吗？

感谢您的帮助！

Answer 1

您有一些拼写错误，例如 opaicty 而不是 opacity。您可以自己找到并更正它们，因为它们与问题无关。您犯的主要错误是您从不更新 div 大小，而我在 updateSizing 中就是这样做的。您还需要 select 来自 jQuery select 的特定 div 或在使用 innerHTML 时使用 [0]，因为它不是 jQuery 方法。在 JSFiddle.

上查看这些更改

JQuery，在先前设置高度后将 div 高度调整为新内容

JQuery, resize div height to new content after previously setting height

html

javascript

jquery

overflow