HTML5details标签展开收起教程详解

<style>
details > summary {
  list-style: none; /* 移除原生箭头 */
}
details > summary::before {
  content: "▶ ";
  margin-right: 4px;
  font-size: 0.9em;
}
details[open] > summary::before {
  content: "▼ ";
}
</style>

注意：::marker 在部分旧版 Safari 中不生效，::-webkit-details-marker 仅限 WebKit 内核；统一用 ::before 是最兼容的方案。

JavaScript 控制 open 状态时要注意什么

虽然原生行为已足够，但若需程序化控制（比如按钮触发、表单提交后自动展开错误项），应操作 open 属性而非 class 或 style。

• 用 element.open = true 或 element.setAttribute('open', '')，不要写 element.style.display = 'block'
• 监听状态变化应使用 toggle 事件（非 click），它在用户交互或 JS 修改 open 后都会触发
• toggle 事件没有取消默认行为的机制，也不需要 —— 它只是通知状态已变

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

兼容性和无障碍要点容易被忽略

IE 完全不支持