多Dropdown点击切换箭头图标：JavaScript实现需求

完善后的JavaScript代码 #

const dropdownBtn = document.querySelectorAll('.b-footerMobile__item');
const dropdowns = document.querySelectorAll('.b-footerMobile__dropdown');

dropdownBtn.forEach((btn) => {
    btn.addEventListener('click', (e) => {
        const targetId = e.currentTarget.dataset.dropdown;
        const currentDropdown = document.getElementById(targetId);
        // 获取当前按钮内的上下箭头元素
        const currentUpArrow = btn.querySelector('.b-footerMobile__up');
        const currentDownArrow = btn.querySelector('.b-footerMobile__down');

        // 切换当前下拉菜单的显示状态
        currentDropdown.classList.toggle('active');
        // 同步切换箭头的显示状态
        currentUpArrow.classList.toggle('active');
        currentDownArrow.classList.toggle('active');

        // 处理其他下拉菜单：关闭并重置箭头状态
        dropdowns.forEach((dropdown) => {
            if (dropdown.id !== targetId && dropdown.classList.contains('active')) {
                dropdown.classList.remove('active');
                // 找到对应按钮的箭头并重置为默认向下状态
                const correspondingBtn = document.querySelector(`[data-dropdown="${dropdown.id}"]`);
                const otherUpArrow = correspondingBtn.querySelector('.b-footerMobile__up');
                const otherDownArrow = correspondingBtn.querySelector('.b-footerMobile__down');
                otherUpArrow.classList.remove('active');
                otherDownArrow.classList.add('active');
            }
        });
    });
});

关键修改说明 #

• 精准获取当前按钮的箭头：不再使用全局的箭头元素数组，而是通过点击的按钮直接查询内部的箭头元素，确保操作的是当前下拉菜单对应的箭头，避免混淆。
• 同步切换状态：在切换下拉菜单active类的同时，对当前按钮内的上下箭头也执行toggle('active')，实现菜单开闭与箭头图标的联动。
• 重置其他菜单的箭头：当关闭其他下拉菜单时，不仅移除菜单的active类，还会将对应按钮的箭头重置为默认的向下状态，保证所有菜单的箭头状态与自身开闭状态一致。

内容的提问来源于stack exchange，提问作者user22222422