根据宽度隐藏Div内容：移动端菜单关闭内容残留问题

问题根源 #

你目前只给.mobile-menu设置了宽度变为0的过渡，但没限制容器内内容的溢出行为，导致内容会超出容器边界显示，所以即使菜单容器宽度缩为0，内部的按钮等元素依然能看到。

修复步骤 #

1. 调整CSS样式 #

给.mobile-menu添加overflow: hidden属性，让超出容器的内容直接隐藏；同时把过渡效果写在默认样式里，避免JS动态添加导致的重复绑定问题：

.mobile-menu{
    width:100vw;
    height: 100vh;
    background: red;
    position: fixed;
    z-index: 10000;
    overflow: hidden; /* 隐藏溢出内容 */
    transition: width .5s ease; /* 把过渡效果放在默认样式中 */
}

再新增一个关闭状态的CSS类，用来控制菜单收起：

.mobile-menu.close{
    width: 0;
}

2. 优化JS交互逻辑 #

改用类切换的方式控制菜单开关，这种方式更符合前端开发的最佳实践，也更易维护：
首先给移动端的菜单打开按钮绑定事件（对应top_bar_mobile里的汉堡按钮），然后修改关闭按钮的逻辑：

// 新增移动端打开按钮的变量
let openMobileMenu = document.querySelector('#top_bar_mobile #open_menu');

// 移动端菜单关闭逻辑
closeMenuMobile.addEventListener('click',function(e){
    mobileMenu.classList.add('close');
});

// 移动端菜单打开逻辑
openMobileMenu.addEventListener('click', function(){
    mobileMenu.classList.remove('close');
});

3. 设置菜单初始状态 #

如果移动端菜单默认需要隐藏，直接在HTML里给.mobile-menu加上close类：

<div class="mobile-menu close" id="mobile_menu">
    <button class="far fa-times" id="close_menu_mobile">cerrar</button>
</div>

额外适配：桌面端自动隐藏移动端菜单 #

在showMenu函数里补充桌面端时自动隐藏移动端菜单的逻辑：

function showMenu(){
    if( window.innerWidth <= 600){
        topBarWeb.style.display = "none";
        topBarMobile.style.display = "flex";
        contentMenu.style.display = "none";
    }else{
        topBarWeb.style.display = "flex";
        contentMenu.style.display = "flex";
        topBarMobile.style.display = "none";
        mobileMenu.classList.add('close'); // 桌面端强制隐藏移动端菜单
    }
}

完整优化代码片段 #

CSS部分 #

/* 修改后的移动端菜单样式 */
.mobile-menu{
    width:100vw;
    height: 100vh;
    background: red;
    position: fixed;
    z-index: 10000;
    overflow: hidden;
    transition: width .5s ease;
}
/* 菜单关闭状态 */
.mobile-menu.close{
    width: 0;
}

JS部分 #

//Variables
let openMenu = document.getElementById('open_menu');
let contentMenu = document.getElementById('content_menu');

let iconsTopBar = document.querySelectorAll('.icon-top-bar');

let topBarWeb = document.getElementById('top_bar_web');
let topBarMobile = document.getElementById('top_bar_mobile');

let closeMenuMobile = document.getElementById('close_menu_mobile');
let mobileMenu = document.getElementById('mobile_menu');
let openMobileMenu = document.querySelector('#top_bar_mobile #open_menu');

//Functions
openMenu.addEventListener('click',function(e) {
    contentMenu.classList.toggle('close-menu');
});
window.addEventListener("resize", function(){
    iconsTopBar.forEach(icon => {
        if( window.innerWidth <= 1000){
            if(icon.classList.contains('fad')){
                icon.classList.remove('fad');
                icon.classList.add('fas');
            }
        }else{
            if(icon.classList.contains('fas')){
                icon.classList.remove('fas');
                icon.classList.add('fad');
            }
        }
    });
    if( window.innerWidth <= 768){
        contentMenu.classList.add('close-menu');
    }else{
        contentMenu.classList.remove('close-menu');
    }
    showMenu();
});
window.onload = showMenu();
function showMenu(){
    if( window.innerWidth <= 600){
        topBarWeb.style.display = "none";
        topBarMobile.style.display = "flex";
        contentMenu.style.display = "none";
    }else{
        topBarWeb.style.display = "flex";
        contentMenu.style.display = "flex";
        topBarMobile.style.display = "none";
        mobileMenu.classList.add('close');
    }
}

closeMenuMobile.addEventListener('click',function(e){
    mobileMenu.classList.add('close');
});

openMobileMenu.addEventListener('click', function(){
    mobileMenu.classList.remove('close');
});

HTML部分 #

<div class="mobile-menu close" id="mobile_menu">
    <button class="far fa-times" id="close_menu_mobile">cerrar</button>
</div>

内容的提问来源于stack exchange，提问作者Aldahir Ruiz Valdez