data-menu-state 必须设在根元素或容器上，直接用 setAttribute 设置，同步更新 aria-expanded 和 aria-hidden，CSS 用 [data-menu-state="open"] 选择器，HTML 初始化需写死属性值。
data-menu-state 必须设在根元素或容器上，不能靠 class 模拟
用 data-menu-state 控制菜单开闭，本质是把状态“挂”到 DOM 上供 CSS 和 JS 读取。如果写成 document.body.classList.add('menu-open')，后续所有依赖 [data-menu-state="open"] 的 CSS 规则都会失效——因为选择器根本没匹配上。
正确做法是直接操作属性：
-
document.documentElement.setAttribute('data-menu-state', 'open')（全局生效，适合全站侧边栏） -
menuContainer.setAttribute('data-menu-state', 'open')（局部生效，比如某个下拉菜单的父<div>）
注意：不要用 dataset 写法绕过大小写限制，menuContainer.dataset.menuState = 'open' 会自动转成 data-menu-state，但部分旧版 Safari 对 dataset 初始化有延迟，首次读取可能为 undefined；直接 setAttribute 更稳。
切换时必须同步更新 aria-expanded 和 aria-hidden
只改 data-menu-state 不会影响屏幕阅读器。菜单按钮和面板之间必须建立 ARIA 关联：
立即学习“前端免费学习笔记（深入）”；
- 按钮加
aria-expanded="true"/"false"，值要和data-menu-state一致 - 面板加
aria-hidden="true"/"false"，且必须和按钮的aria-controls属性指向同一id - 如果面板用
hidden属性控制显隐，aria-hidden仍需显式设置——hidden不等价于aria-hidden
示例片段：
<button type="button" aria-expanded="false" aria-controls="nav-menu">☰</button> <nav id="nav-menu" hidden aria-hidden="true"></nav>
JS 切换时两行不能少：
button.setAttribute('aria-expanded', 'true');
nav.setAttribute('aria-hidden', 'false');
CSS 里用 [data-menu-state="open"] 做样式，别嵌套在媒体查询里
[data-menu-state="open"] 是一个普通属性选择器，权重固定。常见错误是把它塞进 @media (max-width: 768px) 里声明样式，结果桌面端菜单永远不响应——因为媒体查询只控制「何时应用规则」，不改变选择器本身是否生效。
正确结构是：
- 先写基础状态：
[data-menu-state="open"] .menu-panel { transform: translateX(0); } - 再叠加断点：
@media (max-width: 768px) { [data-menu-state="open"] .menu-panel { display: block; } }
漏掉 [data-menu-state="open"] 前缀，或者写成 .menu-panel[data-menu-state="open"]（顺序反了），都会导致样式不触发——前者权重不够被覆盖，后者要求 data-menu-state 在面板元素上，而它实际在容器上。
初始化阶段必须手动设一次初始值，否则首屏白屏或错态
服务端渲染或静态 HTML 直出时，data-menu-state 必须在 HTML 中就存在，不能等 JS 加载后再补。否则用户看到的是未展开的菜单容器，但面板已因 CSS 规则提前显示（或反之）。
初始化逻辑要点：
- HTML 中写死：
<nav data-menu-state="closed"> - JS 启动时先读取当前值：
const initialState = nav.getAttribute('data-menu-state')，再决定是否执行展开逻辑 - 如果菜单状态依赖 localStorage，读取后立即设回 DOM：
nav.setAttribute('data-menu-state', stored || 'closed')，避免闪动
最易忽略的一点：CSS 动画过渡必须带回退值。例如 transform: translateX(-100%); transition: transform 0.3s ease;，否则初始态没有 data-menu-state="open" 时，面板可能卡在错误位置。
