+是当前最省心、最稳的布局方案，不写js也能折叠/展开、语义正确、屏幕阅读器友好、打印pdf不错位；但嵌套需严格遵循dom顺序、缩进用margin-left、连线用伪元素、禁用white-space:nowrap以确保跨浏览器与打印一致性。
用 <details></details> + <summary></summary> 是当前最省心、最稳的布局方案，不写 JS 也能折叠/展开、语义正确、屏幕阅读器友好、打印 PDF 不错位。
为什么不用 <ul></ul> 嵌套手动控制显示隐藏
很多人一上来就写 <ul>
<li>
<span class="toggle">▶</span>文件夹</li>
<ul>...</ul>
</ul>>>，再靠 JS 切换 <code>display: none。这看似灵活，但实际埋了三个坑：
- 键盘用户按
Enter或Space无法触发，tab焦点跳过折叠区，无障碍直接挂掉 - Chrome 打印 PDF 时，JS 控制的
display状态会重置，所有子项全展开或全收起，目录结构丢失 - IE11 虽然已基本淘汰，但若真要兼容，
<details></details>需 polyfill；而手写 JS 的 toggle 逻辑在 IE 中更容易因事件冒泡或状态不同步出错
<details></details> 嵌套怎么写才不乱层级
嵌套本身合法，但浏览器不会自动缩进，得靠 CSS 控制视觉层级。关键不是“嵌几层”，而是让每级缩进稳定、图标对齐、文字不断行溢出：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 每层
<details></details>必须包裹一个且仅一个<summary></summary>，且<summary></summary>必须是第一个子元素，否则原生箭头不显示、点击无效 - 缩进统一用
margin-left: 1.2rem（别用padding-left），避免内边距干扰点击热区和打印渲染 - 禁用
white-space: nowrap—— 否则长文件名或中文路径会在小屏上横向溢出，破坏布局 - 如果某级节点文字太长，加
word-break: break-word，确保换行位置合理，不卡在 URL 中间或 HTML 标签名里
连线和图标必须用伪元素，不能塞 <img> 或 Unicode
想画树形连线（比如竖线+横线组成的「T」形）？千万别用 <div class="line"> 或 Unicode 字符（如 └、├）。这些在等宽字体下偏移、在打印时消失、在 Safari 中渲染模糊：
<ul>
<li>竖线用 <code><summary>::before</summary>：设 position: absolute; left: -16px; top: 0; height: 100%; border-left: 1px solid #999
<details>::after</details>（只加在最后一个子项上）：content: ""; position: absolute; left: -16px; top: 50%; width: 16px; border-top: 1px solid #999
<summary>::marker</summary> 或 ::before 控制，禁用 transform: scaleY(-1) 类翻转技巧——Chrome 打印时会丢掉真正难的不是把目录列出来，而是让每一级缩进在 Chrome/Firefox/Safari 下像素级对齐，让每条连线在导出 PDF 时不偏移，让每个图标在 Retina 屏和普通屏下都清晰。这些细节一旦写错，改起来比重写还费劲。
