JavaScript点击切换多菜单项箭头图片失效问题求解

document.getElementsByClassName('downArrow')返回值是类数组格式的元素集合，不是单个DOM节点，直接对集合设置src属性不会生效，只有具体的单个DOM元素才能直接修改src属性。
原有逻辑绑定单个id的写法只能适配一个菜单项，无法复用给多个下拉菜单，且全局查找箭头元素的逻辑会同时匹配到页面上所有带downArrow类的图片，无法精准控制当前点击菜单的箭头状态。

调整后的HTML #

给所有需要下拉箭头交互的菜单项统一添加sub-menu-toggle类，移除单个菜单项的固定id，方便批量绑定事件：

<div class="header__links hide-for-mobile">
    <a class="sub-menu-toggle" href="#">
        Features <img class="downArrow" src="/assets/images/icon-arrow-down.svg">
    </a>
    <a class="sub-menu-toggle" href="#">
        Company <img class="downArrow" src="/assets/images/icon-arrow-down.svg">
    </a>
    <a href="#">Careers</a>
    <a href="#">About</a>
</div>

修正后的JS逻辑 #

批量给所有菜单项绑定点击事件，事件触发时仅操作当前点击菜单内部的箭头元素，不会影响其他菜单：

// 获取所有带下拉交互的菜单项
const menuToggles = document.querySelectorAll('.sub-menu-toggle');

menuToggles.forEach(toggle => {
    toggle.addEventListener('click', function(e) {
        // 阻止a标签默认的锚点跳转行为
        e.preventDefault();
        // 仅查找当前点击菜单内部的箭头元素
        const currentArrow = this.querySelector('.downArrow');

        if (this.classList.contains('subOpen')) {
            this.classList.remove('subOpen');
            currentArrow.src = "/assets/images/icon-arrow-down.svg";
        } else {
            this.classList.add('subOpen');
            currentArrow.src = "/assets/images/icon-arrow-up.svg";
        }
    })
})

• 若使用getElementsByClassName获取元素，需要通过索引拿到具体节点才能操作属性，例：document.getElementsByClassName('downArrow')[0].src = 'xxx'，这种方式只适合页面只有一个目标元素的场景，多元素复用场景优先用querySelector在当前元素范围内查找目标
• 多组件复用时不要全局查找目标元素，要从当前触发事件的元素出发查找内部子元素，避免误改其他组件的状态
• 给a标签绑定点击交互时记得调用e.preventDefault()，避免触发默认锚点跳转导致页面滚动到顶部

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