我正在制作导航栏，但我没有发现响应此导航栏的错误。谁能帮我答案

【问题标题】：I am making nav bar but I don't find the error in making responsive to this nav bar. Can anyone help me我正在制作导航栏，但我没有发现响应此导航栏的错误。谁能帮我
【发布时间】：2021-11-19 02:15:32
【问题描述】：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

*{ 边距：0；填充：0； box-sizing：边框框； } 标头{ 位置：相对；宽度：100%；高度：80px；背景色：rgb(153, 153, 153); 显示：弯曲； justify-content: 之间的空格；对齐项目：居中； } 标头一个img{ 宽度：100px；填充顶部：20px； } 标题#菜单栏{ 列表样式类型：无； } 标题 ul li{ 显示：弯曲；列表样式：无； } 标题 ul li a{ 文字装饰：无；填充：0 10px；白颜色; 字体大小：18px；文本转换：大写；字母间距：1.4px； } .导航栏{ 边框：2px 纯白色；文本对齐：居中；右边距：10px；显示：无； } .fa-bars{ 白颜色; 字体大小：18px；填充：5px； } 。积极的{ 显示：块；背景：红色 } @media only screen and (max-width:600px){ 标头 ul { 显示：无；边距顶部：200px；宽度：100vw；文本对齐：居中；背景：天蓝色； } .导航栏{ 显示：块； } 标题 ul li{ 弹性方向：列； } 标题 ul li a{ 颜色：黑色; 填充顶部：10px； } .navbar { 显示：无； } }

</head>

<body>
    <!-- Adding Navbar -->

    <header>
        <a href="#logo" class="logo">
            <img src="./img/Logo.png" alt="logo">
        </a>
        <ul id="menu-bar">
            <li>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Contact</a>
            </li>
        </ul>
        <a href="" class="nav-bar" id="navBtn"><i class=" fas fa fa-bars"></i></a>
    </header>

     <script>            
      let mainNav = document.getElementById('menu-bar');
        let navBarToggle = document.getElementById('navBtn');

       <!--I am facing a problem in this line-->

        navBarToggle.addEventListener('click', function (){
            mainNav.classList.add('active');
        });

</body>
</html>

【问题讨论】：

请把代码格式化好一点
将您的 <a href="" class="nav-bar" id="navBtn"> 更改为 span。

标签： javascript css

【解决方案1】：

请查看sn-p。一切似乎都在按应有的方式运行。您的 navbar 变成 hamburger-menu 就像在 media-queries 设置为 max-width: 600px 中的指示一样

出于查看 sn-p 的目的，我将您的 media max-width 更改为 1000px

let mainNav = document.getElementById('menu-bar');
        let navBarToggle = document.getElementById('navBtn');

       // I am facing a problem in this line 

        navBarToggle.addEventListener('click', function (){
            mainNav.classList.add('active');
        });

*{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 header{
     position: relative;
     width: 100%;
     height: 80px;
     background-color: rgb(153, 153, 153);
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 header a img{
     width: 100px;
     padding-top: 20px;
}
 header #menu-bar {
     list-style-type: none;
}
 header ul li{
     display: flex;
     list-style: none;
}
 header ul li a{
     text-decoration: none;
     padding: 0 10px;
     color: white;
     font-size: 18px;
     text-transform: uppercase;
     letter-spacing:1.4px;
}
 .nav-bar{
     border: 2px solid white;
     text-align: center;
     margin-right: 10px;
     display:none;
}
 .fa-bars{
     color: white;
     font-size: 18px;
     padding: 5px;
}
 .active{
     display: block;
     background:red 
}
 @media only screen and (max-width:1000px){
     header ul {
         display:none;
         margin-top: 200px;
         width: 100vw;
         text-align: center;
         background:skyblue;
    }
     .nav-bar{
         display:block;
    }
     header ul li{
         flex-direction: column;
    }
     header ul li a{
         color: black;
         padding-top: 10px;
    }
     .navbar {
         display: none;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
</head>

<body>
    <!-- Adding Navbar -->

    <header>
        <a href="#logo" class="logo">
            <img src="./img/Logo.png" alt="logo">
        </a>
        <ul id="menu-bar">
            <li>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Services</a>
                <a href="#">Contact</a>
            </li>
        </ul>
        <a href="" class="nav-bar" id="navBtn"><i class=" fas fa fa-bars"></i></a>
    </header>
</body>
</html>

【讨论】：