显示无 CSS 规则在移除时禁用 JS 代码答案

【问题标题】：Display None CSS Rule disabling JS code when removed显示无 CSS 规则在移除时禁用 JS 代码
【发布时间】：2021-08-28 02:49:39
【问题描述】：

编辑：移动查询类 .Nav 包含“display: none;”在其中。 javascript 代码按预期工作，打开和关闭所需的类。尽管由于 .Nav 类中的“display:none”，open 类是不可见的。删除此代码后，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>

【问题讨论】：

如果你能创建一个minimal reproducible example就太好了。这可能是因为您没有为.nav-container 设置初始位置/可见性。考虑使用 left: -340px` 而不是 translateY (-340px)。我还是不行，创建一个jQuery函数，在页面加载时关闭nav-container。
感谢您的回复。当我删除可见性：隐藏的 css 规则时，javascript 不再起作用。我已经完成了您的建议，它与我的代码相同。在移动媒体查询中，可见性：隐藏是它不显示菜单的原因。删除该规则后，javascript 将不起作用。
由于某种原因，您提供的代码也无法在我的本地环境中运行
是的，这就是我面临的问题。我知道它不起作用，但只是显示所需的代码。如果您在检查元素中查看此内容，您将看到容器通过突出显示检查元素上的类打开，但它不可见。
谢谢！不幸的是，JavaScript 现在没有触发任何东西。并且将背景颜色添加到 .nav 仍然会显示颜色。

标签： javascript html css hamburger-menu

【解决方案1】：

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

我尝试在媒体查询中删除 .nav css，JS 切换类 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>

【讨论】：

太棒了，不幸的是，这不适用于我的。我将上传更正后的版本，您可以检查它们的元素。 blacklist-rs.com/design
对不起，忘了说我没有在<div id="menu-icon"></div>里面移动<div class='nav'>。我只删除了媒体查询中的.nav css
是的，我更新了它，但在本地或我的网站上都无法使用。我在媒体查询中有额外的 CSS，并且导航位于单独的样式页面上。
你更新到你的网站了吗？因为我在这里看到：menu-icon 仍在 nav div 中？
我刚刚检查了该网站。你还需要nav-bg-close吗？如果你删除它，它会触发切换，但现在 div 覆盖了图标，所以它没有被点击。