手风琴上的最大高度切换动画[副本]

Question

https://codepen.io/sabgalaxy/pen/xwjxgwy

let containers = document.getElementsByClassName("container");


for(let container of containers){
    container.addEventListener("click",() => {
    /*Get the child ul element*/           
   let dropdownElement = container.childNodes[1].childNodes[7];
    if (dropdownElement.style.maxHeight) {
      dropdownElement.style.maxHeight = null;
    } else {
      dropdownElement.style.maxHeight = dropdownElement.scrollHeight + "px";
    }

  });
}

Answer 1

这是因为当手风琴展开时，浏览器会在屏幕的右手边生成一个滚动条，它缩小了视图端口，并“推”向左所有内容。你可以用几种不同的方式来承认这一点。

首先，在正常情况下，手风琴菜单从一开始就不应该导致页面溢出。这真的没有任何理由发生。

如果您不想更改页面的结构，请查看下面的线程，以防止这种情况发生：