HTML/CSS/JS中maxHeight过渡导致内容截断的问题求助

问题根源在于用固定值的maxHeight实现过渡时，无法适配子菜单展开后的实际高度，加上可能存在的父容器固定高度/overflow: hidden设置，导致下方元素被裁切。以下是具体解决方法：

1. 动态计算子菜单实际高度，替代固定maxHeight #

放弃给展开状态的子菜单设置固定maxHeight，通过JS获取元素的scrollHeight（内容实际高度）来动态设置，确保容器能完全包裹展开后的内容：

修改后的JS代码 #

function toggleMenu(el) {
  const submenu = el.nextElementSibling;
  if (submenu.classList.contains('expanded')) {
    // 收起逻辑：先设为0触发过渡，完成后移除类名
    submenu.style.maxHeight = '0';
    submenu.addEventListener('transitionend', function reset() {
      submenu.classList.remove('expanded');
      submenu.removeEventListener('transitionend', reset);
    }, { once: true });
  } else {
    // 展开逻辑：先添加类名，再设置为实际内容高度触发过渡
    submenu.classList.add('expanded');
    submenu.style.maxHeight = submenu.scrollHeight + 'px';
    // 过渡完成后设置为none，避免后续内容变化受maxHeight限制
    submenu.addEventListener('transitionend', function setAuto() {
      submenu.style.maxHeight = 'none';
      submenu.removeEventListener('transitionend', setAuto);
    }, { once: true });
  }
}

简化后的CSS #

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
/* 无需再给.expanded设置固定maxHeight */

2. 检查并移除父容器的限制属性 #

如果树形菜单的外层容器设置了固定高度或overflow: hidden，会直接导致内容超出后被裁切，需要修改：

/* 错误示例 */
.tree-menu-container {
  height: 400px; /* 固定高度限制了容器可撑开的范围 */
  overflow: hidden; /* 超出部分被隐藏 */
}

/* 修改后 */
.tree-menu-container {
  /* 移除固定height */
  overflow: visible; /* 或直接删除overflow属性，默认值为visible */
}

3. 确保菜单容器无高度限制 #

不要给最外层的树形菜单容器设置任何固定高度，让它能根据子菜单的展开/收起自动撑开高度，这样下方的subtitle 3就会随着容器高度的增加自然下移，不会被裁切。

内容的提问来源于stack exchange，提问作者Ehsan Rosdi