html怎么创建树形菜单_html tree view树形菜单展开折叠【推荐】-html教程-PHP中文网

html无原生树形菜单组件，必须用ul/li嵌套结构+css动画+js控制展开收起；details/summary仅适合简单静态场景，因兼容性差、不支持多级联动且样式难定制。

html怎么创建树形菜单_html tree view树形菜单展开折叠【推荐】

HTML 本身不提供树形菜单组件，必须靠 CSS + JavaScript 实现展开/折叠逻辑；纯 HTML <details></details> 标签虽能模拟，但兼容性和样式控制弱，生产环境不推荐直接用。

用 `<details></details>` 快速原型（仅限简单场景）

Chrome/Firefox/Edge（≥79）支持 <details></details> + <summary></summary>，语义清晰、无需 JS，适合文档类静态菜单：

<details><summary>前端工具</summary><ul>
<li>Webpack</li>
    <li>Vite</li>
  </ul></details>

但注意：<details></details> 默认无法多级嵌套展开（部分浏览器会重置子 <details></details> 的 open 状态）；<summary></summary> 样式难定制（比如加图标、hover 效果）；Safari 对嵌套支持不稳定；服务端渲染时所有节点默认闭合，无法初始展开指定层级。

用原生 JS 实现可复用的树形菜单（推荐）

核心是监听点击、切换 class、控制 display 或 max-height 动画。关键点：

结构用 <ul></ul>/<li> 嵌套，每个父节点带 data-toggle="tree-node" 和 aria-expanded
折叠状态存在 aria-expanded 属性里，兼顾可访问性
用 classList.toggle() 切换 is-open 类，CSS 控制 max-height 过渡（比 display 更易做动画）
避免用 querySelectorAll('li > ul') 全局查子菜单——应只操作当前节点下的第一个 <ul></ul>，防止误触兄弟节点

示例 JS 片段：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

document.addEventListener('click', e => {
  const btn = e.target.closest('[data-toggle="tree-node"]');
  if (!btn) return;
  const menu = btn.nextElementSibling;
  if (!menu || menu.tagName !== 'UL') return;
  const isOpen = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !isOpen);
  menu.classList.toggle('is-open');
});

用 CSS 控制展开动画和图标状态

动画依赖 max-height 而非 height（后者无法过渡 auto），需预估最大高度或用 JS 动态设值。图标旋转用 transform: rotate(90deg) 最稳：

.tree-node__toggle::after {
  content: '▶';
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.2s;
}
.tree-node__toggle[aria-expanded="true"]::after {
  transform: rotate(90deg);
}
.tree-node__children {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.tree-node__children.is-open {
  max-height: 500px; /* 需足够容纳最深子菜单 */
}

注意：max-height 值不能写死为 none（无法过渡），也不能太小导致截断；图标用伪元素比 <i></i> 更轻量，且可随 aria-expanded 精确同步状态。