本文介绍如何使用纯 javascript 实现多组下拉菜单的图标状态同步控制：点击时，对应菜单展开并显示向上箭头，收起时显示向下箭头；同时确保其他已展开菜单自动关闭，并同步更新其图标状态。
本文介绍如何使用纯 javascript 实现多组下拉菜单的图标状态同步控制：点击时，对应菜单展开并显示向上箭头，收起时显示向下箭头；同时确保其他已展开菜单自动关闭，并同步更新其图标状态。
在移动端或响应式侧边栏导航中，常见“标题 + 箭头图标 + 下拉内容”的交互模式。用户期望视觉反馈明确：向下箭头（▼）表示可展开，向上箭头（▲）表示已展开且可收起。当页面存在多个同类下拉组件时，需保证：
- 每个下拉项独立响应点击；
- 同一时刻仅有一个下拉处于激活态（互斥）；
- 图标状态与下拉内容的显隐严格同步；
- 逻辑可复用、不依赖 ID 硬编码。
以下是一套简洁、健壮、符合现代 DOM 操作规范的实现方案。
✅ 核心思路：基于父容器状态驱动图标显隐
原代码中直接操作 up/down 全局 NodeList 存在两个关键问题：
- querySelectorAll(‘.b-footerMobile__up’) 获取的是所有图标节点，无法精准定位到当前按钮下的图标；
- 图标切换逻辑未与 .b-footerMobile__item 的激活状态绑定，导致状态不同步。
优化策略：不再单独管理图标元素列表，而是利用 CSS 类委托（class delegation）——通过给 .b-footerMobile__item 添加 active 类，再用 CSS 规则控制其内部 .b-footerMobile__up/.b-footerMobile__down 的显示状态。这样既解耦 JS 逻辑，又提升可维护性。
? 完整实现代码
1. JavaScript 逻辑（推荐写法）
const dropdownBtns = document.querySelectorAll('.b-footerMobile__item'); const dropdowns = document.querySelectorAll('.b-footerMobile__dropdown'); dropdownBtns.forEach(btn => { btn.addEventListener('click', e => { const targetId = e.currentTarget.dataset.dropdown; const targetDropdown = document.getElementById(targetId); // 关闭所有已展开的下拉菜单及对应图标状态 dropdownBtns.forEach(item => item.classList.remove('active')); dropdowns.forEach(drop => drop.classList.remove('active')); // 切换当前项状态 e.currentTarget.classList.add('active'); targetDropdown.classList.add('active'); }); });
? 提示：此写法避免了 forEach 嵌套遍历和重复 classList.toggle()，逻辑更清晰，性能更优，且天然支持任意数量下拉项。
2. 关键 CSS 规则（精简高效）
/* 默认：显示向下箭头，隐藏向上箭头 */ .b-footerMobile__item .b-footerMobile__down { display: block; } .b-footerMobile__item .b-footerMobile__up { display: none; } /* 激活状态下：反转图标可见性 */ .b-footerMobile__item.active .b-footerMobile__down { display: none; } .b-footerMobile__item.active .b-footerMobile__up { display: block; } /* 下拉内容基础样式 */ .b-footerMobile__dropdown { display: none; } .b-footerMobile__dropdown.active { display: flex; flex-direction: column; align-items: center; background-color: #414141; width: 100%; padding: 1px 0; height: 90%; }
⚠️ 注意：.bla 容器已非必需——图标直属于 .b-footerMobile__item，CSS 选择器可直接穿透控制。若保留 .bla，请将 active 类加在其上，并调整 CSS 为 .bla.active .b-footerMobile__down { … }。
3. HTML 结构（语义化 & 可扩展）
<div class="b-footerMobile__menu"> <!-- Dropdown 1 --> <div class="b-footerMobile__item" data-dropdown="dropdown1"> <h2 class="b-footerMobile__title">Drop1</h2> <div class="b-footerMobile__arrow-wrapper"> <img src="./images/arrow-down-mobile.svg" alt="展开" class="b-footerMobile__arrow b-footerMobile__down"> <img src="./images/arrow-up-mobile.svg" alt="收起" class="b-footerMobile__arrow b-footerMobile__up"> </div> </div> <div class="b-footerMobile__dropdown" id="dropdown1"> <div class="b-footerMobile__li"><p class="b-footer__p">选项 1</p></div> <div class="b-footerMobile__li"><p class="b-footer__p">选项 2</p></div> <div class="b-footerMobile__li"><p class="b-footer__p">选项 3</p></div> </div> <!-- Dropdown 2 --> <div class="b-footerMobile__item" data-dropdown="dropdown2"> <h2 class="b-footerMobile__title">Drop2</h2> <div class="b-footerMobile__arrow-wrapper"> <img src="./images/arrow-down-mobile.svg" alt="展开" class="b-footerMobile__arrow b-footerMobile__down"> <img src="./images/arrow-up-mobile.svg" alt="收起" class="b-footerMobile__arrow b-footerMobile__up"> </div> </div> <div class="b-footerMobile__dropdown" id="dropdown2"> <div class="b-footerMobile__li"><p class="b-footer__p">选项 A</p></div> <div class="b-footerMobile__li"><p class="b-footer__p">选项 B</p></div> </div> </div>
? 注意事项与最佳实践
- 图标 alt 属性应语义化：如 alt=”展开” / alt=”收起”，提升无障碍访问体验；
- 避免内联样式或 JS 强制 display：统一交由 CSS 类控制，便于主题切换与动画扩展；
- 如需添加过渡动画：可在 .b-footerMobile__dropdown 上添加 max-height + overflow: hidden 配合 transition，或使用 height: 0 → height: auto（需 JS 测量）；
- 移动端点击穿透风险：建议为 .b-footerMobile__item 添加 cursor: pointer 和 user-select: none，提升触控反馈；
- 扩展性考虑：若未来需支持多选（非互斥），只需移除全局 remove(‘active’) 逻辑，改为独立 toggle 即可。
该方案以最小 JS 干预、最大 CSS 表达力达成目标，结构清晰、易于测试与维护，适用于任何基于 class 的下拉交互场景。