多层嵌套按钮实为状态叠加而非DOM嵌套，应通过平级元素（如div或dialog）实现视觉层级，避免button内嵌button；CSS动画与发光效果须隔离作用域；事件需严格隔离并阻止冒泡；响应式菜单选择器应统一覆盖各级class；必须手动同步管理aria属性。
多层嵌套按钮不是 DOM 嵌套，而是状态叠加
HTML 里没有“嵌套按钮”这种语义结构——<button> 不允许子 <button>，浏览器会自动修正 DOM。所谓“多层嵌套特效”，实际指：一个按钮触发后，视觉上叠加出第二层（如弹出菜单、抽屉、模态配置面板），且各层独立控制显隐、焦点和遮罩。强行把子按钮写在父按钮内部，会导致事件丢失、焦点混乱、移动端滚动锁失效。
- 父按钮点击后，应动态创建或显示一个平级的
<div class="dropdown">或<dialog>，而非塞进<button>标签内 - 所有交互容器（下拉层、抽屉、弹窗）必须挂载在
<body>下，用唯一 ID 区分，避免 DOM 嵌套干扰 JS 状态 - 若用
<dialog>，注意它不支持showModal()嵌套：第二个调用会直接失败，报错DOMException: The element is already in a top layer
霓虹发光 + 抽屉展开 = 两套 CSS 不能混写
给按钮加发光效果（box-shadow 多层）和让它触发抽屉（transform 动画），必须隔离作用域。共用同一组 transition 或 transform 规则，极易因层级冲突导致动画卡顿或错位。
-
box-shadow必须写成单条声明，用逗号分隔：box-shadow: 0 0 5px #f0f, 0 0 10px #0ff, 0 0 20px #00f；重复写box-shadow属性会被覆盖 - 抽屉动画用
transform: translateX()，但必须限定只作用于抽屉容器本身，不能让按钮也参与该过渡 —— 否则发光阴影会随位移抖动 - 移动端需额外处理
:active状态：纯box-shadow在触摸时无反馈，建议加background-color微调或用scale(0.98)模拟按压
jQuery 绑定多层显隐时，事件作用域必须严格隔离
常见错误是用一个 $('button').on('click', ...) 统一处理所有层级，结果点击子菜单项时，父级按钮的监听器又执行一遍，造成显示/隐藏逻辑翻转。
- 为每层容器设独立 class（如
.main-btn、.submenu-trigger、.config-toggle），分别绑定事件 - 在子层事件处理器开头加
e.stopPropagation()，防止冒泡到父层监听器 - 切换显隐时，不要依赖
.toggle()，而应显式判断：if ($submenu.is(':visible')) { $submenu.hide(); } else { $submenu.show(); }，避免状态不可控 - 若用
.shown类控制显示，CSS 中必须确保它声明在所有具体隐藏类（如.submenu、.config-panel）之后，否则display: none会覆盖display: block
小屏下多级菜单点击失效？多半是 class 名没对齐
响应式菜单常在小屏改用 click 触发，但开发者容易忽略：顶层菜单用 .submenu，二级用 .nested-menu，而 JS 里只查 .submenu，导致深层节点永远找不到目标元素。
立即学习“前端免费学习笔记（深入）”；
- 统一用选择器
.submenu, .nested-menu, .tier3-menu查找可切换区域，不要硬编码单一 class - 避免用
document.querySelectorAll('.menu-item')后再this.querySelector('.submenu')，应直接this.querySelector('.submenu, .nested-menu') - 如果某层菜单需要延迟展开（比如加载远程配置），别在 click 回调里直接
show()，先加 loading 状态，等数据就绪再操作 DOM，否则用户会误点多次
aria-expanded 和 aria-hidden，尤其子层打开时，父层触发按钮的 aria-expanded="false" 要同步更新——否则屏幕阅读器会认为父菜单仍处于展开态，导航逻辑全乱。 
