JavaScript DOM 操作怎么实现树形菜单的折叠与展开动画-js教程-PHP中文网

javascript实现树形菜单折叠展开动画的核心是用max-height过渡配合动态高度计算，通过toggle类切换、scrollheight测量和requestanimationframe确保平滑，同时兼顾可访问性与兼容性。

javascript dom 操作怎么实现树形菜单的折叠与展开动画

JavaScript DOM 操作实现树形菜单的折叠与展开动画，核心在于控制子菜单的 height 或 max-height 过渡、配合 CSS 动画，并通过类名或属性标记节点状态。关键不是“隐藏/显示”，而是“渐变高度”——这需要准确获取子菜单内容高度并动态设置。

用 `max-height` + CSS 过渡实现平滑动画

这是最常用且兼容性好的方式，避免直接操作 height: auto（它无法过渡）。原理是：给子菜单设一个足够大的 max-height 值（如 500px），再用 transition 过渡该属性。

示例结构：

CSS 设置：

.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.submenu.open {
  max-height: 500px; /* 需大于实际内容高度 */
}

JavaScript 控制逻辑：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

点击 .toggle 时，找到紧邻的 .submenu
检查是否已含 open 类：有则移除，无则添加
为避免极端内容高度超出预设值，可先临时设 max-height: none 获取真实高度，再设回具体像素值（见下一点）

动态计算真实高度以提升健壮性

当子菜单项数量不确定（比如异步加载、可增删项），固定 max-height: 500px 可能不够或过大，影响动画效果。此时可在 JS 中动态测量：

先移除 max-height（设为 none），强制浏览器重排，读取 scrollHeight
立即设回 max-height: 0（触发收缩起点）
使用 requestAnimationFrame 确保样式已应用，再设目标高度（scrollHeight）
动画结束后，清除内联 max-height，回归 CSS 控制

简化代码示例：

function toggleSubmenu(submenu) {
  const isOpen = submenu.classList.contains('open');
  if (isOpen) {
    submenu.style.maxHeight = submenu.scrollHeight + 'px';
    requestAnimationFrame(() => {
      submenu.style.maxHeight = '0';
      submenu.classList.remove('open');
    });
  } else {
    submenu.style.maxHeight = '0';
    submenu.classList.add('open');
    requestAnimationFrame(() => {
      submenu.style.maxHeight = submenu.scrollHeight + 'px';
    });
  }
<p>// 动画结束后清理内联样式
submenu.addEventListener('transitionend', () => {
if (!submenu.classList.contains('open')) {
submenu.style.maxHeight = '';
}
}, { once: true });
}</p>