移除移动端.Nav类display:none规则后对应JS代码失效问题咨询

问题根源 #

你遇到的两个异常都是CSS逻辑错误导致的，和JS本身无关：

1. 给父级.nav设置display: none时，所有子元素都会继承不可见状态，就算JS成功给.nav-container添加了nav-open类，菜单也会因为父元素隐藏无法显示
2. 删除display: none后你以为JS失效，实际是CSS存在多处无效属性和优先级问题，导致nav-open类的样式没有生效，JS的类切换逻辑本身是正常运行的

具体修复步骤 #

1. 修正无效CSS属性 #

• .nav-container的width: -340px是完全无效的语法，浏览器会直接忽略，改为width: 340px
• .nav-open里的transform: translateY(340px,0)是错误写法：translateY仅支持单个参数，且你要实现水平滑入效果应该用translateX，如果已经用left属性控制位置可以直接删掉这段错误的transform代码
• 提高nav-open的选择器优先级，改为.nav-container.nav-open，避免被前面的.nav-container样式覆盖

2. 调整导航显示逻辑 #

不要给父级.nav加display: none，你可以默认让侧边栏隐藏在屏幕外，点击后滑入即可，不需要控制父元素的显示状态。

修改后完整代码参考 #

CSS（仅媒体查询内的部分）

@media only screen and (max-width: 1280px) {
    .header #menu-icon{
        left: 35px;
        top: 46px;
        position: absolute;
        width: 30px;
        height: 30px;
        background-image:url(https://blacklist-rs.com/design/img/menu.svg);
        background-repeat: no-repeat;
        cursor:pointer;
    }   

    .nav{
        position:fixed;
        top:0px;
        left:0px;
        width:100%;
        height:100%;
        z-index:99999;
        /* 删掉display:none，父级不需要隐藏 */
        background: rgba(0,0,0,0.7); /* 可选：加半透明蒙层效果 */
    }
    .header {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100px;
        z-index: 999;
    }

    .nav-container {
        position:absolute;
        top:0px;
        left:-340px;
        width: 340px; /* 修正负宽度错误 */
        height:100%;
        background-color:#000;
        transition: all 0.5s; /* 过渡属性放在默认状态，开合都有动画 */
    }

    /* 提高优先级，只写需要变化的属性即可 */
    .nav-container.nav-open {
        left:0px;
    }
}

JS代码不需要修改，原有逻辑已经可以正常切换类状态。

可选优化 #

如果需要点击蒙层关闭菜单，可以额外加一段点击事件：

document.querySelector('.nav-bg-close').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.remove('nav-open')
})

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