HTML ol列表如何实现折叠层级内容-html教程-PHP中文网

ol 本身不支持折叠，强行用 display: none 隐藏子 ol 会破坏语义、编号和可访问性；正确方案是用 details + ol 组合实现语义化折叠，既保留编号逻辑又获得原生折叠能力。

html ol列表如何实现折叠层级内容

ol 本身不支持折叠，强行用 display: none 隐藏子 ol 会破坏语义、编号和可访问性——这不是样式问题，是结构误用。

为什么不能直接对嵌套 `ol` 做折叠

浏览器强制要求子 ol 必须完整嵌套在父 li 内部，否则编号重置、DOM 层级断裂、屏幕阅读器无法识别层级关系。哪怕 CSS 看起来缩进正确，只要子 ol 不在 li 标签内，语义就已失效。

常见错误：
一级项


二级项

ol

type 属性不继承，ol[type="A"] > li > ol 不会自动变成数字编号，必须显式写 type="1"
用 visibility: hidden 或 height: 0 控制显隐，仍占用布局空间，且无法触发键盘焦点或屏幕阅读器播报

替代方案：用 `details` + `ol` 组合实现语义化折叠

把每层 ol 的父级 li 替换为 details，让 summary 承担标题，内部再放 ol。这样既保留编号逻辑，又获得原生折叠能力。

示例结构：

财经HTML高端海报生成

复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

下载

<ol>
<li>
    <details><summary>第一章：入门</summary><ol>
<li>安装环境</li>
        <li>Hello World</li>
      </ol></details>
</li>
  <li>
    <details><summary>第二章：进阶</summary><ol>
<li>异步编程</li>
        <li>错误处理</li>
      </ol></details>
</li>
</ol>

summary 必须是 details 的第一个子元素，否则点击无效
编号由外层 ol 和内层 ol 各自独立控制，互不影响
无需 JS 即可键盘操作（空格/回车），屏幕阅读器能准确播报“已展开”“已折叠”
Safari 对 summary::marker 支持弱，建议用 summary::before + transform: rotate() 控制箭头方向