响应式菜单在桌面视图中异常显示的问题求助

你遇到的问题是：在移动端打开汉堡菜单后，切换到桌面视图时，移动端的菜单没有自动隐藏，依然显示在页面上，而正常情况下桌面视图应该只显示顶部的#nav-bar，隐藏#mobile菜单。我帮你分析下问题所在，以及对应的解决办法：

问题根源 #

1. 内联样式优先级冲突：当你在移动端点击汉堡打开菜单后，JS给#mobile设置了display:block !important的内联样式。当窗口放大到桌面端时，虽然CSS里写了#mobile{display:none !important;}，但内联样式的!important优先级比外部CSS的更高，所以CSS的隐藏规则不会生效。
2. JS逻辑判断错误：你代码里的doc.hasAttribute('style','transform:rotate(-450deg) translate(0px,0px);')写法完全错误，hasAttribute只能检查某个属性是否存在，根本无法检查属性的具体值，这部分判断逻辑完全没起到作用。
3. 缺少窗口 resize 监听：你的代码只处理了汉堡按钮的点击事件，没有监听窗口尺寸变化的场景，所以从移动端切换到桌面端时，没有自动重置菜单状态。

解决办法 #

1. 修复并优化JS代码 #

直接基于clk状态来控制菜单开关（因为clk就是专门记录菜单开合状态的变量），同时添加窗口 resize 事件监听，当窗口超过移动端阈值时强制重置菜单状态：

let doc = document.getElementById('bar');
let doc2 = document.getElementById('mobile');
let clk = false;
// 和你CSS里的media query阈值保持一致
const mobileBreakpoint = 400;

// 汉堡按钮点击逻辑
doc.onclick = function(){
    clk = !clk;
    if(clk){
        // 打开菜单：旋转汉堡，显示移动端菜单
        doc.setAttribute('style','transform:rotate(-450deg) translate(0px,0px);');
        doc2.setAttribute('style','display:block !important;');
    }else{
        // 关闭菜单：重置汉堡样式，隐藏移动端菜单
        doc.setAttribute('style','transform:rotate(0deg) translate(0px,0px);');
        doc2.setAttribute('style','display:none !important;');
    }
};

// 监听窗口尺寸变化，切换到桌面时强制重置菜单
window.addEventListener('resize', function(){
    if(window.innerWidth > mobileBreakpoint){
        clk = false;
        // 重置汉堡的旋转样式
        doc.setAttribute('style','transform:rotate(0deg) translate(0px,0px);');
        // 强制隐藏移动端菜单
        doc2.setAttribute('style','display:none !important;');
    }
});

2. 可选：优化CSS优先级 #

如果想减少!important的使用，也可以调整CSS规则的优先级，比如给桌面端的#mobile规则加更具体的选择器，不过上面的JS修复已经能彻底解决问题，这一步是可选的。

额外小提示 #

以后不要用hasAttribute去判断style属性的具体值，这种用法是错误的。如果需要判断元素的样式状态，要么用自己维护的状态变量（比如这里的clk），要么用window.getComputedStyle(doc)去获取计算后的样式值。

内容来源于stack exchange