点击汉堡菜单图标时与关闭图标重叠，如何点击后隐藏汉堡图标

API 探路者

2026-10-14

移动端汉堡菜单点击后重叠问题解决方案

问题原因

你当前给.hamburger-image元素添加active类时仅设置了关闭图标为背景，但该img标签本身的src属性仍指向汉堡图标，两个图标同时渲染就会出现重叠问题。

解决方案

提供两种可选实现方案：

方案1：JS直接切换图标src（更推荐）

该方案逻辑直观，无需额外处理样式兼容问题，只需修改script.js代码，同时删除CSS中.hamburger-image.active的相关样式即可：

const hamIcon = document.getElementsByClassName("hamburger-icon")[0];
const navLinks = document.getElementsByClassName("hamburger-link")[0];
const navHeader = document.getElementsByClassName("nav-header")[0];
const iconClose = document.getElementsByClassName("hamburger-image")[0];
const navInfo = document.getElementsByClassName("nav-info")[0];

hamIcon.addEventListener('click', () => {
    navLinks.classList.toggle('active');
    navHeader.classList.toggle('active');
    navInfo.classList.toggle('active');
    // 切换图标资源路径
    iconClose.src = iconClose.src.includes('icon-hamburger.svg') 
        ? 'images/icon-close.svg' 
        : 'images/icon-hamburger.svg';
})

方案2：保留背景图实现，修改CSS隐藏原图标

如果不想修改JS逻辑，可以调整CSS的激活样式，隐藏img本身的内容只展示背景的关闭图标：

.hamburger-image.active{
    font-size: 0; /* 隐藏img自带的内容与alt文字 */
    background-image: url(images/icon-close.svg) !important;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
    width: 24px; /* 调整为和你的图标实际宽度一致 */
    height: 24px; /* 调整为和你的图标实际高度一致 */
}