当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5details和summary展开收起教程

HTML5details和summary展开收起教程

2026-01-08 17:10:07 0浏览收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML5 details和summary实现展开收起效果教程》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

的open属性是反映初始状态的反射属性，无法直接赋值控制开关，应使用toggleAttribute('open')；需用::marker或::after自定义图标；多
联动须监听toggle事件并手动处理兄弟节点。

HTML5怎么用details和summary做折叠菜单_展开收起效果【技巧】

直接用

和

就能实现原生、无障碍、无需 JS 的折叠菜单，但默认样式简陋、展开状态难控制、嵌套或自定义交互时容易翻车。

为什么
的`open`属性不能靠JS反复切换

很多人写 element.open = true 后再设 false 发现没反应——这是因为 open 是**反映元素初始状态的属性（reflected attribute）**，不是实时控制开关的“开关量”。真正触发收起/展开的是用户点击

，或调用 element.toggleAttribute('open')。

✅ 正确切换方式：
```
detailsEl.toggleAttribute('open');
```

❌ 无效写法：

detailsEl.open = false; // 不会触发UI变化

⚠️ 注意：直接操作 open 属性只影响初始渲染，后续需用 toggleAttribute 或 removeAttribute('open') 配合事件监听

怎么让
不显示默认箭头并加自定义图标

浏览器对

的 ::marker 伪元素支持不一（Chrome/Firefox 支持，Safari 目前不支持），纯 CSS 隐藏+替换最稳。

先清除原生标记：
```
summary::marker { content: ''; }
```

再用伪元素加图标（推荐 SVG 内联，避免字体图标兼容问题）：

summary::after { content: '▶'; transform: rotate(0deg); transition: transform 0.2s; } details[open] > summary::after { transform: rotate(90deg); }

⚠️ Safari 中 ::marker 无效，必须依赖 ::before/::after；若用字体图标（如 Font Awesome），要确保 font-display: optional 避免 FOIT

多个
联动：点击一个展开时自动收起其他

原生不支持手风琴效果，得用 JS 监听 toggle 事件并手动处理兄弟节点。

监听所有

的 toggle 事件（注意：该事件在展开/收起后触发，不是点击瞬间）：

document.querySelectorAll('details').forEach(details => { details.addEventListener('toggle', () => { if (details.open) { document.querySelectorAll('details').forEach(d => { if (d !== details) d.removeAttribute('open'); }); } }); });

⚠️ 关键点：不能在 click 上做，因为
点击行为由浏览器接管，click 事件可能早于状态更新；toggle 才是状态落地后的可靠时机
性能提示：如果列表很长（>50 项），建议用事件委托，但需注意
不冒泡 toggle 事件，只能逐个绑定

细节上最常被忽略的是：Safari 对 toggle 事件的支持从 iOS 16.4 / macOS 13.3 才开始完整；若需兼容更老版本，得降级为监听 click 并用 setTimeout 延迟判断 open 状态——这时候原生优势就弱了，不如直接上轻量 JS 组件。

以上就是《HTML5details和summary展开收起教程》的详细内容，更多关于的资料请关注golang学习网公众号！

Pixiv每日推荐关注技巧全解析

上一篇: Pixiv每日推荐关注技巧全解析

下一篇: 天眼查怎么查企业招投标信息？

查看更多

HTML5details和summary展开收起教程

为什么的open属性不能靠JS反复切换

怎么让不显示默认箭头并加自定义图标

多个联动：点击一个展开时自动收起其他

为什么
的`open`属性不能靠JS反复切换

怎么让
不显示默认箭头并加自定义图标

多个
联动：点击一个展开时自动收起其他