click事件监听器必须绑定在可点击元素上，而非父容器；应为每个菜单项标题单独绑定，用class切换控制显隐，展开前先关闭其他已开项，并支持键盘Enter/Space键操作。
click 事件监听器必须绑定在可点击元素上，不是父容器
很多人把 click 监听器加在菜单整体（比如 <nav></nav> 或 <ul></ul>）上，结果点击子项没反应。这是因为事件冒泡虽存在，但默认不会自动触发子项逻辑——你得明确告诉 JS “哪个元素点下去才该展开”。
正确做法是给每个菜单项的标题（如 <button></button> 或带 role="button" 的 <div>）单独绑定 <code>click：
document.querySelectorAll('.menu-item > .title').forEach(el =>
el.addEventListener('click', toggleItem)
)
- 别用
document.querySelector('.menu')然后监听它的click再判断e.target—— 容易误触、难维护 - 如果标题是
<a href="#"></a>，记得加e.preventDefault()，否则页面会跳到顶部 - 移动端需额外加
touchstart或用pointerdown兼容，仅靠click有 300ms 延迟
用 class 切换控制 display，别直接操作 style.display
直接写 el.style.display = 'block' 看似简单，但会覆盖 CSS 中定义的响应式规则（比如媒体查询里的 display: flex），也难以统一管理过渡动画。
推荐用一个开关类（如 is-open），由 CSS 控制显隐和动画：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
.menu-item .content { max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }
.menu-item.is-open .content { max-height: 500px; }
-
max-height比height更可靠：避免内容高度不确定时动画卡顿或截断 - 设一个足够大的
max-height（如500px），比用scrollHeight动态计算更轻量，且兼容性更好 - 别用
visibility: hidden+opacity，它不释放文档流空间，会影响布局
展开前先收起其他已开项，避免多开冲突
单项展开意味着“一次只能开一个”，但很多实现只做“自己开/关”，忘了关别人。用户连续点两行，结果两个都开着——这不是 bug，是逻辑漏了。
在 toggleItem 函数里，先用 document.querySelectorAll('.menu-item.is-open') 找出所有已开项，逐个移除 is-open：
function toggleItem(e) {
const item = e.currentTarget.closest('.menu-item');
const isOpen = item.classList.contains('is-open');
// 先关掉所有
document.querySelectorAll('.menu-item.is-open').forEach(i =>
i.classList.remove('is-open')
);
// 再开当前（如果原来没开）
if (!isOpen) item.classList.add('is-open');
}
- 用
closest()而不是假设 DOM 结构固定，增强健壮性 - 如果菜单项是动态渲染的（比如 Vue/React），这个逻辑要放在状态更新之后再执行，否则查不到新节点
- 不需要用
setTimeout强制重排——classList是同步的，浏览器会自然触发重绘
键盘可访问性不能只靠 tabindex，还得处理 Enter/Space
加了 tabindex="0" 只是让元素能被聚焦，但按 Enter 或 Space 仍不会触发展开——这是 WCAG 2.1 明确要求的交互缺失。
必须监听 keydown 并手动触发：
el.addEventListener('keydown', e => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleItem({ currentTarget: e.currentTarget });
}
});
-
Space键需e.preventDefault()，否则会触发页面滚动 - 别只监听
Enter：屏幕阅读器用户习惯用空格键操作按钮 - 确保
.title元素有role="button"，否则某些读屏软件不识别其可交互性
