下拉菜单用原生JS实现：绑定click/keydown事件切换active类，配合CSS的max-height+opacity过渡；点击外部自动收起；添加ARIA属性和键盘支持确保无障碍。
用 JavaScript 实现下拉菜单的展开与收起，核心是控制菜单容器的显示状态（如 display 或 visibility），并配合点击事件切换。不需要框架，原生 JS 就够用，关键是状态管理清晰、交互响应及时。
监听点击事件，切换菜单显隐
给触发按钮（如导航项）绑定 click 事件，点击时检查下拉区域是否已显示，再决定是展开还是收起。
- 推荐用
classList.toggle()切换一个 CSS 类（如active），由 CSS 控制样式和过渡效果，比直接操作style.display更灵活 - 确保每次只打开一个菜单：点击其他项时，先关闭所有已展开的菜单，再打开当前项
- 示例逻辑：
button.addEventListener('click', () => {<br> // 关闭其他所有下拉菜单<br> document.querySelectorAll('.dropdown-menu').forEach(menu => {<br> if (menu !== targetMenu) menu.classList.remove('show');<br> });<br> // 切换当前菜单<br> targetMenu.classList.toggle('show');<br>});
用 CSS 配合实现平滑过渡
仅靠 JS 切换显示容易生硬。建议用 CSS 的 max-height + overflow: hidden 或 transform + opacity 实现淡入/滑动效果。
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- 避免直接设
display: none/block—— 它无法过渡；改用opacity和max-height（设一个足够大的固定值，如max-height: 300px） - 添加
transition: opacity 0.2s ease, max-height 0.3s ease，让展开收起有缓动感 - 初始状态设
max-height: 0; overflow: hidden;，激活时设max-height: 300px;（根据内容微调）
点击外部区域自动收起（增强体验）
用户点击菜单以外的地方，应自动关闭所有下拉菜单，这是常见交互预期。
立即学习“Java免费学习笔记（深入）”；
- 在
document上监听一次click，判断点击目标是否在触发按钮或菜单内部 - 用
event.target.closest()检查：如果点击的既不是按钮，也不在对应菜单内，就收起所有菜单 - 注意事件冒泡顺序，可对按钮和菜单的
click调用event.stopPropagation()，防止误触发全局收起
兼顾键盘与无障碍支持
仅靠鼠标点击不够健壮。添加键盘支持（如 Enter / Space 触发）和 ARIA 属性，能让下拉菜单更易用。
- 给按钮加
role="button" aria-expanded="false"，展开时动态更新aria-expanded值为true - 监听
keydown事件，对Enter和Space键执行相同展开逻辑 - 菜单容器加上
role="menu"，菜单项加role="menuitem"，方便屏幕阅读器识别
