HTML列表标签怎么实现树形折叠菜单的无序列表-H5教程-PHP中文网

树形折叠菜单需html嵌套ul构建结构，css控制缩进、图标及display隐藏子菜单，javascript通过toggle类切换显隐并更新图标。

html列表标签怎么实现树形折叠菜单的无序列表

用 HTML 无序列表（<ul></ul>）实现树形折叠菜单，核心不是靠 HTML 单独完成，而是结合 CSS 控制显示/隐藏 + JavaScript 处理点击交互。HTML 只负责结构，真正“折叠”靠 JS 控制类名或样式，CSS 负责视觉呈现。

结构：嵌套 `<ul></ul>` 构建层级

树形菜单本质是多层嵌套的无序列表。每一级 <li> 可包含文字、按钮（用于展开/收起）和子 <ul></ul>：

CSS：默认隐藏子菜单 + 添加缩进和图标

用 CSS 控制子 <ul></ul> 默认不显示，并添加层级缩进与折叠指示图标：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

给所有子 <ul></ul> 设置 display: none，再用 JS 切换 display: block 或加/删类名
用 margin-left 或 padding-left 实现视觉缩进，例如 ul ul { margin-left: 1.2em; }
用 ::before 或内联 <span class="toggle"></span> 显示 ▶️ / ▼ 图标，配合 JS 动态切换
可选：加过渡动画，如 max-height + overflow: hidden 实现平滑展开（需固定高度或 JS 计算）

JavaScript：绑定点击事件控制展开/收起

监听所有 .toggle 元素的点击，找到它后面紧邻的 <ul></ul>，切换其显隐状态：

document.querySelectorAll('.toggle').forEach(toggle => {
  toggle.addEventListener('click', () => {
    const nextUl = toggle.nextElementSibling;
    if (nextUl && nextUl.tagName === 'UL') {
      nextUl.classList.toggle('open');
      // 同时可更新图标，比如：toggle.textContent = nextUl.classList.contains('open') ? '▼' : '▶️';
    }
  });
});

对应 CSS 中定义：.tree-menu ul:not(.open) { display: none; } 或更推荐用 .tree-menu ul { display: none; } .tree-menu ul.open { display: block; }