显示 None CSS 移除时禁用 JS 代码的规则

Question

编辑：移动查询 class.Nav 包含“显示：none；”在里面。 javascript 代码按预期打开和关闭所需的 classes。尽管由于 .Nav class 中的“显示：none”，打开的 class 是不可见的。删除此代码后，javascript 将不再有效。你可以在我的网站上查看https://blacklist-rs.com/design/

document.querySelector('#menu-icon').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
@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; /** Code that makes the javascript work **/
/** Once removed, menu displays but javascript doesnt work **/
}
.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;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <div class="header">    
                <div id="menu-icon"></div>  
                <div class="nav">
                <div class="nav-bg-close"></div> 
                <div class="nav-container">
                    <div class="close"></div>
                    <div class="main-menu">
                    <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
        </ul></div>
    </div>
    
    </div>
    </div>
    </body>

Answer 1

请注意，只要这两个元素存在，JS 就会工作：#menu-icon 和 .nav-container

我试过在媒体查询中删除 .nav css，JS 切换 class nav-open 并显示菜单。

document.querySelector('#menu-icon').addEventListener('click', function() {
    document.querySelector('.nav-container').classList.toggle('nav-open')
})

body {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    background-color:#000;
    font-family: 'EurostileBold', sans-serif;
}

#background{
    position:fixed;
    z-index:-1;
    top:0px;
    left:0px;
}
@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;
    }   
}
.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;
}

.nav-open {
    position:absolute;
    top:0px;
    left:0px;
    width:340px;
    height:100%;
    background-color:#000;
    -webkit-transform: translateY(340px,0);
    -ms-transform: translateY(340px,0);
    transition: all 0.5s;
}

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <div class="header">    
                <div id="menu-icon"></div>  
                <div class="nav">
                <div class="nav-bg-close"></div> 
                <div class="nav-container">
                    <div class="close"></div>
                    <div class="main-menu">
                    <ul class="menu">
        <li><a href="#home">Home</a> </li>
        <li><a href="#about">About</a> </li>
        <li><a href="#services">Services</a> </li>
        <li><a href="#contact">Contact</a> </li>
        </ul></div>
    </div>
    
    </div>
    </div>
    </body>

显示 None CSS 移除时禁用 JS 代码的规则

Display None CSS Rule disabling JS code when removed

html

javascript

css

hamburger-menu