details标签不能当进度条用，因其仅支持open/未展开两种状态，无法表达0%→100%连续进度；正确做法是分离语义与视觉：用details控制内容显隐，用progress或自定义元素独立展示实时进度。
details 标签本身不是进度条，也不能直接变成进度条——它只是可折叠内容容器。想用它“模拟”进度展开效果，本质是把「状态切换」和「视觉进度反馈」强行耦合，容易混淆语义、破坏可访问性，也不解决真实进度渲染问题。
为什么不能把 details 当进度条用
原生 details 只有两个状态：open（展开）或未展开，没有中间值。而进度条必须支持 0% → 100% 的连续变化。试图用 details.open 的真假值映射到 30%、75% 这类数值，会导致：
- 屏幕阅读器读出“已展开/未展开”，而非“已完成 62%”
-
summary文本无法动态显示百分比（除非 JS 频繁改 innerHTML，但会触发重排+无障碍中断） - CSS 无法基于 open 状态做线性过渡（
transition: width或scale在布尔属性上无意义）
真要“展开 + 进度”混合效果，该用什么结构
正确做法是分层：用 details 控制内容区域显隐，用独立的 progress 或自定义 div 显示实时进度。两者逻辑分离，各自负责：
-
details：语义化地包裹“进度详情区块”（比如展开后显示步骤列表、日志、错误信息） -
progress或.progress-bar：放在details外部或顶部，纯展示当前完成度 - JS 更新时，只改
progress.value或.progress-fill.style.width，不碰details.open
示例结构：
<div class="task-status">
<progress id="task-progress" max="100" value="45"></progress><details><summary>查看详细步骤（45% 完成）</summary><ol>
<li>✅ 初始化</li>
<li>? 数据加载中...</li>
<li>⏳ 待处理</li>
</ol></details>
</div>
如果坚持用 details 触发“伪进度动画”，要注意这些坑
极少数场景下（如教学演示），你可能想点击 summary 后“假装”进度从 0 增到 100。这时必须放弃原生 progress，改用 JS 驱动宽度动画，并手动同步文本：
- 不要监听
toggle事件后直接设progress.value = 100——这会跳变，没动画 - 要用
requestAnimationFrame或setInterval逐帧更新.progress-fill.style.width -
summary里的百分比文本需在每帧同步更新，否则出现“进度条动了，文字卡在 0%” - Safari 对
progress的样式重绘有延迟，建议全程用div实现进度条
关键代码片段（仅作示意，非推荐方案）：
const progressFill = document.querySelector('.progress-fill');
const summaryText = document.querySelector('summary');
details.addEventListener('toggle', () => {
if (details.open) {
let width = 0;
const timer = setInterval(() => {
width += 2;
progressFill.style.width = width + '%';
summaryText.textContent = `展开中... ${width}%`;
if (width >= 100) clearInterval(timer);
}, 30);
}
});
真正可靠的进度反馈，永远依赖独立的状态变量和明确的 DOM 更新路径。details 是开关，不是仪表盘——混用它们，最后调试 focus 管理、ARIA 属性、动画中断和 Safari scrollHeight 计算误差的时间，远超重写一个干净的进度组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
