用事件冒泡实现侧边栏展开：监听.sidebar父容器，通过e.target.closest('[data-toggle="submenu"]')识别标题，用nextelementsibling获取对应.submenu，再toggle('open')控制显隐，并配合max-height过渡动画。
用事件冒泡实现侧边栏展开，核心思路是：**不给每个菜单项单独绑定点击事件，而是监听父容器（如 .sidebar），利用点击事件向上冒泡的特性，在父级统一处理，再根据实际点击的目标元素（event.target）判断是否为可展开项（比如带 data-toggle="submenu" 的标题）**。这样既减少事件监听器数量，又便于动态增删菜单项。
1. HTML 结构要支持语义化识别
侧边栏需有明确的层级关系，子菜单默认隐藏，触发元素要有可识别的标记：
- 用
<div class="sidebar"> 包裹整个侧边栏<li>每个可展开项用 <code><h3 data-toggle="submenu">用户管理</h3>表示标题 - 对应子菜单用
<ul class="submenu"><li>...</li></ul>，并紧跟在标题后面
这样结构清晰，JS 可通过 nextElementSibling 快速定位关联的子菜单。
2. 统一监听 sidebar，用 event.target 判断点击目标
只在 .sidebar 上绑定一次点击事件，避免重复绑定。关键代码如下：
document.querySelector('.sidebar').addEventListener('click', function(e) {
const toggleEl = e.target.closest('[data-toggle="submenu"]');
if (!toggleEl) return;
<p>const submenu = toggleEl.nextElementSibling;
if (!submenu || !submenu.classList.contains('submenu')) return;</p><p>submenu.classList.toggle('open');
});
</p>
说明：e.target.closest() 确保即使点到 <h3></h3> 内的文字或图标也能命中；nextElementSibling 安全获取紧邻的子菜单；classList.toggle('open') 控制显隐（配合 CSS 过渡更自然）。
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
3. 配合 CSS 实现展开/收起动画
仅靠 JS 切换类名还不够，CSS 要定义 .submenu 的高度过渡效果：
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.2s ease;
opacity: 0;
}
.submenu.open {
max-height: 500px; /* 设一个足够大的值，或用 scrollHeight 动态设置 */
opacity: 1;
}
注意：max-height 比 height 更适合动画，避免硬编码固定高度；若子菜单项数量变化大，可用 JS 动态读取 scrollHeight 设置精确值。
4. 可选增强：阻止默认行为与事件隔离
如果侧边栏里还有链接、按钮等其他可点击元素，建议加一层防护：
- 在事件回调开头加
if (e.target.tagName === 'A' || e.target.tagName === 'BUTTON') return;，避免误触发 - 若点击子菜单内部项（如
<li>）不应展开/收起，可加e.stopPropagation()阻止冒泡，但通常不需要——因为closest()已确保只响应标题区域
这样既保持冒泡机制简洁，又避免干扰其他交互逻辑。
