data-*属性仅作状态存储，不触发行为；手风琴需JS读取data-target定位元素并切换class与aria-expanded实现展开/收起及无障碍支持。
data-* 属性本身不触发折叠，只是存状态用的
HTML 的 data- 属性是只读的元数据容器，它不会自动绑定行为或监听点击。想实现手风琴效果，必须配合 JavaScript 读取 data-open、data-target 这类属性，再操作 DOM 和 CSS 类。常见错误是以为加了 data-open="true" 就能自动展开——实际它只是个字符串标记，和 style 或事件完全无关。
典型使用场景：多个 <section> 块共用同一套 JS 逻辑，靠 data-target="#panel-1" 关联标题与内容区，避免硬编码 ID 或重复写事件监听器。
用 data-target + querySelector 实现精准控制
手风琴的核心是「点一个标题，只展开对应内容，收起其他」。用 data-target 指向目标元素最灵活，比靠 DOM 层级（如 nextElementSibling）更健壮——即使结构微调也不崩。
- 标题按钮写：
<button data-target="#faq-1">Q1</button> - 对应内容写：
<div id="faq-1" class="accordion-panel">...</div> - JS 里用
document.querySelector(button.dataset.target)拿到目标，再切换aria-expanded和class
注意：button.dataset.target 返回的是字符串（如 "#faq-1"），直接传给 querySelector 即可；别漏掉 # 或写成 dataset.target.slice(1) 再拼接——徒增出错可能。
立即学习“前端免费学习笔记（深入）”；
data-open 是冗余的，用 class 控制显隐更可靠
有人习惯在 HTML 里写 data-open="true" 表示默认展开，但这会带来同步问题：JS 初始化时要读它、点击时要改它、CSS 还得靠属性选择器（如 [data-open="true"]）去匹配——三头难顾。实际项目中，统一用 class="is-open" 管理状态更简单：
- CSS 写
.accordion-panel.is-open { max-height: 500px; }，配合transition - JS 只需
targetEl.classList.toggle("is-open")，无需碰dataset - 初始状态直接写在 HTML 里：
<div id="faq-1" class="accordion-panel is-open">
如果真要用 data-open 做 SSR 初始态判断，也仅限首次加载时读一次，之后全交由 class 驱动——否则容易出现 class 和 data 不一致的“幽灵状态”。
aria-expanded 和 data-* 要保持同步，不然屏幕阅读器会懵
无障碍支持不是锦上添花，而是手风琴组件的刚需。aria-expanded 必须实时反映当前展开/收起状态，且值只能是 "true" 或 "false"（字符串）。很多人只改了 class，忘了同步 aria-expanded，导致视障用户听到“已展开”但内容不可见。
正确做法是：每次切换面板时，**同时**操作两个东西：
targetEl.classList.toggle("is-open")triggerBtn.setAttribute("aria-expanded", targetEl.classList.contains("is-open"))
注意：setAttribute 的第二个参数是布尔值，浏览器会自动转成字符串 "true"/"false"；别手贱写成 String(...) 或模板字符串，容易出 "undefined"。
data-* 属性在这里唯一合理用途，可能是记录原始问题编号（如 data-question-id="q3"）用于埋点，而不是参与交互逻辑。
