是HTML原生实现折叠图表区的最佳方案，语义正确、无需JS即可支持键盘操作与屏幕阅读器；必须为首个子元素，图表容器置于其后，展开时通过toggle事件初始化或调用resize()确保尺寸准确。
用 details + summary 实现原生折叠图表区
HTML 原生就支持无 JS 折叠展开，details 元素是最佳选择——它语义正确、可访问性好、无需额外 CSS 或 JS 就能工作。把图表容器（比如 <div id="chart-container">）直接放在 <code>details 内部即可。
常见错误是手动写 display: none + 点击切换类名，这会破坏屏幕阅读器识别、丢失默认键盘交互（如回车/空格展开），也容易漏掉 aria-expanded 同步。
-
summary标签内写标题文字，浏览器自动添加小三角图标，点击即触发折叠逻辑 - 图表渲染库（如 Chart.js、ECharts）建议在
details[open]为真时再初始化，避免渲染到隐藏区域导致尺寸计算异常 - 若图表依赖父容器宽高（如
width: 100%），折叠时父容器高度塌缩，展开后需手动调用图表的resize()方法（如myChart.resize()）
折叠时图表不重绘？监听 toggle 事件补救
details 元素在展开/折叠时会触发 toggle 事件，这是同步图表状态的唯一可靠时机。别用 click 或 transitionend ——前者无法区分是用户点击还是键盘操作，后者在无动画时根本不会触发。
示例：Chart.js 场景下确保图表在展开后正确渲染
立即学习“前端免费学习笔记（深入）”；
<details id="chart-section"> <summary>销售趋势图</summary> <div id="chart-container"></div> </details>
对应 JS：
const details = document.getElementById('chart-section');
const chartContainer = document.getElementById('chart-container');
let myChart;
<p>details.addEventListener('toggle', () => {
if (details.open && !myChart) {
// 首次展开才初始化，避免重复创建
myChart = new Chart(chartContainer, { /<em> 配置 </em>/ });
} else if (details.open && myChart) {
// 已存在，仅重绘（尤其当容器尺寸变化时）
myChart.resize();
myChart.update();
}
});IE 不支持 details？用 CSS + :checked 回退
IE 完全不支持 details，如果必须兼容，可用隐藏复选框 + :checked + ~ 选择器模拟。但注意：该方案无法被屏幕阅读器识别为可折叠区域，且键盘操作（Tab → Space）不生效，仅作视觉降级。
- 结构上用
<input type="checkbox" id="chart-toggle">+<label for="chart-toggle"></label>替代summary - 图表容器用
<div class="chart-wrapper">，CSS 中写 <code>#chart-toggle:not(:checked) ~ .chart-wrapper { display: none; } - 不要依赖 JS 控制
checked状态——否则失去“点击 label 即切换”的原生行为 - 务必加
aria-expanded和aria-controls手动同步，否则无障碍体验断裂 - 给图表容器加
max-height和overflow: hidden，再配合transition: max-height 0.3s ease-in-out - 初始折叠时设
max-height: 0，展开时设一个足够大的值（如max-height: 500px），避免内容截断 - 更稳妥的做法是用
transform: scaleY()+origin，性能更好，但需注意图表 canvas 可能被缩放拉伸，此时应在展开后立即重置transform并调用resize()
折叠动画卡顿？避免对 details 直接加 transition
details 本身不能直接做 height 过渡（因为高度是自动计算的），强行加 transition: height 0.3s 会导致展开瞬间闪跳或动画失效。真正要动的是内部图表容器。
折叠展开的核心不是动效炫技，而是确保图表在可见时尺寸准确、数据可读、键盘可操作。原生 details 覆盖了 90% 场景，剩下那 10% 的兼容和动画细节，恰恰是最容易被跳过测试的点。
