本文介绍如何使用纯 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 的下拉交互场景。
