Question

我结合使用了CSS和javascript，当用户单击该div的标头时，该扩展允许用户将特定的div从0扩展到其初始高度。

HTML

 <button class="accordion accordion1">

    <div class="innerbutton">
        <div class="heading">Click to expand me!</div>
    </div>

</button>

<div class="panel panelmargin">

    Some content that will appear when button is clicked

</div>

CSS

button.accordion.active:after {
content: "\2212";
}

div.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}

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";
    } 
  }
}

我有几个面板的内容高度约为4000像素。最初单击该按钮时，scrollHeight仅设置为大约2400px。多次单击按钮时，scrollHeight将正确设置为4000px，我可以看到所有内容。

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

这是codepen。我没有扩展到4000px的内容，但这可以使您更好地了解其功能。

https://codepen.io/anon/pen/QBONoO

谢谢！

Answer 1

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

中

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

});

这确保只在加载所有图像之后才计算scrollHeight。

然后在图像加载时在页面上放置一个加载gif，以便用户在图像仍加载时不尝试打开下拉菜单。在图像仍在加载时单击按钮不会执行任何操作。此加载图标将防止用户感到沮丧。

How to show Page Loading div until the page has finished loading

panel.scrollHeight <实际高度面板

1 个答案: