嵌套Accordion手风琴菜单展开无法突破初始边界如何修复

问题原因 #

当前实现的逻辑仅在点击手风琴按钮时计算对应直接子面板的内容高度，设置固定max-height值。嵌套结构下，子面板展开会增加父面板的实际内容高度，但父面板的max-height还是之前设置的固定值，无法适配新的内容高度，就会导致内容被遮挡。

修改方案 #

只需要替换原有的JS逻辑即可，不需要修改CSS和HTML结构。修改后的JS代码如下：

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

// 递归更新所有祖先面板的max-height
function updateParentPanels(panel) {
  var parentPanel = panel.parentElement.closest('.panel');
  if (parentPanel && parentPanel.style.maxHeight) {
    parentPanel.style.maxHeight = parentPanel.scrollHeight + "px";
    updateParentPanels(parentPanel);
  }
}

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
    // 每次操作后更新所有祖先面板的高度
    updateParentPanels(panel);
  });
}

逻辑说明 #

新增的updateParentPanels函数会在每次点击手风琴按钮后执行，找到当前面板的所有祖先面板，重新计算它们的实际内容高度并更新max-height，就能保证外层容器随着内部子菜单的展开自动扩展高度，不会出现内容遮挡的问题。

内容的提问来源于stack exchange，提问作者Tom Baker