当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5details组件使用教程及默认展开设置

HTML5details组件使用教程及默认展开设置

2026-01-05 22:18:47 0浏览收藏

是 HTML5 原生的可折叠组件，语义上表示“用户可选是否查看的额外信息”。它不依赖 JavaScript 就能实现展开/收起，且自带

作为触发标题。浏览器默认为关闭状态，点击

切换 open 属性。

加 open 属性即可默认展开，这是布尔属性，写上即生效，无需赋值：


  配置项
  这里是一些高级设置…

默认带小三角图标，但该图标不可直接用 CSS 选择器（如 ::marker）跨浏览器稳定定制。常见问题包括：Chrome 显示箭头、Safari 显示实心三角、Firefox 无图标（仅靠缩进识别）。

触发的是 toggle 事件，不是 click。该事件在每次展开或收起后触发，且只在用户交互时发生（JS 设置 open = true 不触发）。

const details = document.querySelector('details');
details.addEventListener('toggle', () => {
  console.log('当前状态：', details.open);
});

toggle 事件没有 event.detail，判断状态只能读取 details.open
不要在 toggle 里调用 preventDefault() —— 它无法被阻止，且无实际效果
多个
共存时，每个都需单独绑定事件，不支持事件委托
若需动画效果（如 height 过渡），得配合 CSS details[open] > *:not(summary) + max-height 和 transition，原生无动画