Javascript 面板高度<；实际高度面板

我有一个css和javascript的组合，允许用户在单击某个div的标题时将该div从0扩展到其初始高度

HTML

Javascript

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

我有一些面板，其内容高度约为4000像素。初次单击按钮时，scrollHeight仅设置为约2400px。当点击按钮数次时，scrollHeight将正确设置为4000px，我可以看到我的所有内容

您知道为什么将scrollHeight设置为不正确的值吗

这是密码笔。我没有扩展到4000px的内容，但这可能会让您更好地了解它的功能

---

谢谢

根据LGSon，我将js函数包装在

$(window).on("load", function() {

});

这将确保仅在加载所有图像后计算scrollHeight

然后，在加载图像时，我在页面上放置一个加载gif，这样用户就不会在图像仍在加载时尝试打开下拉列表。在图像仍在加载时单击按钮不会执行任何操作。此加载图标将防止用户受挫

---

我无法重现你的处境。面板中可能有影响scrollHeight属性的内容。面板中是否有混合内容？ie.？我在面板中有img、b、a（锚定）标记和div。您需要提供一个代码示例来重现所描述的问题。可能您键入错误，但在您的问题中您没有设置scrollHeight，您正在将scrollHeight的值指定给panel.style.maxHeightWell，如果您在其中有图像，并在DOM load上运行上述代码，它将无法工作，因为许多图像尚未加载。如果要考虑图像，请使用

onload

。

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

$(window).on("load", function() {

});