实现手风琴/折叠面板的纯 HTML 写法

纯 HTML 实现手风琴用 和 标签,语义清晰、无需 JS、支持键盘操作与屏幕阅读器;加 open 属性可默认展开,多组并列实现多面板,CSS 仅用于样式微调。

实现手风琴/折叠面板的纯 html 写法">

ails> 实现手风琴/折叠面板的纯 HTML 写法

纯 HTML 实现手风琴(Accordion)或折叠面板,核心是利用

原生标签。无需 JavaScript 或 CSS(基础功能),语义清晰、可访问性好、默认支持键盘操作(如回车/空格展开收起)。

基本结构:一个可折叠项

每个

代表一个面板, 是标题栏,其后内容为折叠区:

常见问题 1 这里是展开后显示的内容,可以是文字、列表、甚至图片。

默认展开与多个面板

open 属性让某一项默认展开;多个

并列即可实现多面板:

默认打开的面板 初始状态即可见。
点击才展开的面板 初始隐藏。

样式微调(可选,仍属纯 HTML + 内联或

外部 CSS)

原生

有默认箭头,可通过 CSS 隐藏并自定义(例如用 ▼ / ▶):

details summary {
  list-style: none;
}
details summary::marker {
  content: "▶ ";
}
details[open] summary::marker {
  content: "▼ ";
}

注意:该 CSS 不影响 HTML 结构合法性,仍属于“纯 HTML 方案”的延伸优化。

无障碍与兼容性提示

优势:自带 ARIA role(role="group"role="button"),屏幕阅读器友好;支持 Safari、Chrome、Firefox、Edge(现代版本均支持)。

注意:IE 完全不支持,如需兼容 IE,必须降级为 JS 方案——但严格意义上已不属于“纯 HTML”范畴。