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。您可以找到这些并自行更正，因为它们与问题无关。你犯的主要错误是你永远不会更新我在updateSizing中所做的div大小。使用[0]时，还需要使用innerHTML从jQuery选择器中选择特定div，因为它不是jQuery方法。在JSFiddle上查看这些更改。

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

1 个答案: