Javascript 手风琴上的最大高度切换动画

我有一个简单的手风琴，在maxHeight上有一个过渡属性。 当我在最大高度（单击事件）之间切换时，clickevent侦听器位于父ul元素上。为什么所有元素都稍微向左移动？（这只发生在第二和第三个ul元素，即“Web开发”和“AI和机器学习”）有人能帮我理解吗

这是密码笔

---

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

首先也是最重要的，在正常的惯例中，手风琴菜单确实不应该导致页面溢出。这真的没有任何理由发生

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

---

之所以会出现这种情况，是因为当手风琴展开时，浏览器会在屏幕右侧生成一个滚动条，从而缩小视图端口，并将所有内容“推”到左侧。你可以用几种不同的方式承认这一点

首先也是最重要的，在正常的惯例中，手风琴菜单确实不应该导致页面溢出。这真的没有任何理由发生

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

---

我觉得不错，你指的是什么？@Laif：更新了我的问题，只有当你点击第2个和第3个ul元素时，才会出现这种情况，你会注意到页眉和顶部的ul元素稍微向左移动，它会为你打开一个滚动条吗？对我来说，唯一的左推就是当一个滚动条生成时，页面会重新调整。是的，是@Laif说的。太棒了，你把我引向了正确的方向。谢谢你看起来很好，你指的是什么？@Laif：更新了我的问题，只有当你点击第2和第3个ul元素时才会出现，你会注意到页眉和第1个ul元素稍微向左移动，它会为你打开一个滚动条吗？对我来说，唯一的左推就是当一个滚动条生成时，页面会重新调整。是的，是@Laif说的。太棒了，你把我引向了正确的方向。非常感谢。

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

  });
}