最稳妥的方式是直接在 toggle 按钮上绑定 click 事件控制通知面板显隐；需显式设 type="button"、同步更新 aria-expanded、避免 display: none 动画，并监听 Escape 和 document 点击关闭，框架中应通过响应式状态而非直接操作 DOM。
click 事件绑定在 toggle 按钮上最稳妥
直接监听 click 是控制通知面板显隐最可靠的方式。用 focus 或 keydown 容易漏触发（比如鼠标点击但没聚焦），而 toggle 本身不是原生 DOM 事件，别被名字误导。
常见错误是给按钮加了 type="button" 却忘了阻止表单默认提交（如果它在 里），导致页面刷新、状态丢失。
- 始终显式写
type="button"，避免浏览器默认行为干扰 - 用
event.preventDefault()仅在必要时（如用标签模拟按钮） - 推荐用
button元素而非div或a，语义清晰且天然支持键盘操作
用 aria-expanded 和 class 切换实现可访问性 + 样式联动
只靠 CSS 类（如 is-open）控制显隐不够——屏幕阅读器无法感知状态变化。必须同步更新 aria-expanded 属性，否则视障用户不知道面板开了还是关了。
样式上建议用 max-height 过渡或 opacity + visibility 组合，避免对 display: none 做 CSS 动画（它不触发 transition）。
- 按钮初始状态：
aria-expanded="false"，面板容器加hidden属性或class="notification-panel--closed" - 切换时同时操作：
button.setAttribute('aria-expanded', 'true')和panel.classList.toggle('is-visible') - 禁用
display: none的过渡动画；改用height: 0→height: auto（需 JS 测量内容高度）或更稳妥的opacity+pointer-events: none
面板关闭逻辑不能只依赖再次点击按钮
用户习惯点击空白处或按 Escape 关闭浮层。如果只响应按钮 click，交互会显得僵硬，尤其在移动端容易误触。
注意事件捕获顺序：点击面板内部不应触发关闭，否则点通知里的链接也会关掉面板。
- 为
document绑定一次keydown监听，判断event.key === 'Escape'，然后关闭 - 用事件委托监听
document的click，检查event.target是否在按钮或面板内：!button.contains(event.target) && !panel.contains(event.target) - 避免多次重复绑定——组件销毁时记得
removeEventListener，否则内存泄漏
React/Vue 中避免直接操作 DOM 控制显隐
在框架中硬写 panel.classList.toggle() 或 panel.hidden = true 会绕过响应式系统，导致状态不同步、服务端渲染不一致、SSR hydration 失败。
Vue 用户别用 v-show 配合手动 display 切换；React 用户别在 useEffect 里反复查 DOM 节点再改 className。
- Vue：用
v-if="isVisible"控制挂载，配合 - React：用布尔 state（如
const [isOpen, setIsOpen] = useState(false)），让 JSX 决定是否渲染面板或加类名 - 所有副作用（如 focus 管理、键盘监听）统一收口到
useEffect或onMounted，清理函数必须存在
真实项目里最容易被忽略的是 Escape 键处理和 aria-expanded 同步时机——往往测试时只点按钮，上线后才被无障碍测试工具报出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
