JS切换按钮图片切换失效：点击切换图片src不生效如何修复？

问题出在**menu.src返回的是完整绝对URL**，而你用相对路径../images/menu.png和它做比较，两者永远不相等，导致判断逻辑失效，无法触发图片切换。

以下是几种修复方案：

方案1：用getAttribute获取原始相对路径 #

直接读取img标签上的src属性值（相对路径）来做判断，匹配逻辑就会正常工作：

function changeToCross() {
    let menu = document.getElementById('navMenu');
    let src = '../images/menu.png'; 

    if (menu.getAttribute('src') === src) {
        menu.setAttribute('src', '../images/close.svg');
    } else {
        menu.setAttribute('src', src);
    }
}

方案2：通过文件名判断 #

检查menu.src是否包含目标图片的文件名，避免路径格式差异的问题：

function changeToCross() {
    let menu = document.getElementById('navMenu');

    if (menu.src.includes('menu.png')) {
        menu.src = '../images/close.svg';
    } else {
        menu.src = '../images/menu.png';
    }
}

方案3：用自定义属性记录状态 #

给图片添加自定义属性标记当前状态，完全脱离路径依赖，稳定性更高：

修改后的HTML：

<div class="icon-menu">
      <img src="../images/menu.png" id="navMenu" data-is-menu="true" onclick="changeToCross()">
</div>

修改后的JS：

function changeToCross() {
    let menu = document.getElementById('navMenu');
    const isMenu = menu.dataset.isMenu === 'true';

    if (isMenu) {
        menu.src = '../images/close.svg';
        menu.dataset.isMenu = 'false';
    } else {
        menu.src = '../images/menu.png';
        menu.dataset.isMenu = 'true';
    }
}

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