为什么我的移动网站菜单不起作用？我的代码中有什么无效的地方？

Question

我是新来的，希望有人能帮助我。

我 1 周前开始学习编程，并通过创建网站开始练习。

一切都很好，直到出现移动响应部分。

我无法让移动菜单与 JS 一起使用。

我尝试过很多不同的东西。我也试过 jQuery 但没有任何效果。

我感觉很笨，希望能得到帮助。

非常感谢！

（对不起，如果我的英语不好；我还在学习）

const btn_mobile = document.getElementsByClassName('.hamburger');
const menu = document.getElementsByClassName('.menu');
btn_mobile.addEventListener('click', function () {
    
    menu.classList.toggle('.active');
})

/*Base Style*/


body{font-family: 'Inter', sans-serif; font-size: 16px;}

a{
    text-decoration: none;
}

h1, h2, h3, h4, h5, p{
    color: white; padding-bottom: 30px;
}


.big-text{font-size: 70px; font-weight: 900;}
.med-text{font-size: 40px;}
.normal-text{font-size: 20px;}
.small-text{font-size: 14px;}

.intro-text{text-transform: uppercase; font-size: 20px; font-weight: bold;}


.button{
    padding: 15px 17px;
    background: rgb(85, 85, 226);
    color: white;
    display:inline-block;
    border-radius: 4px;
    text-align: center;
    

}

@media  (max-width: 768px){
    .big-text{font-size: 40px;}

}
    






/*HEADER*/


.header{
    
    width: 100%;
    position: absolute;
    top: 0;
    padding: 15px;
    display: flex;
    max-width: 1350px;
    left: 50%;
    transform: translateX(-50%);
    

    
}

.logo{
    
}




.hamburger{display: none; }

.menu{
    width: 100%;
    
    
    
}

/*align-items aggiusta verticale
jusify-content aggiusta orizontale
*/

.menu li{
    display: inline-block;
    
}

.menu li a{
    padding: 10px 20px;
    color: white;
    display: block;
    
    
}





.cta{

    display: flex;
    align-items: center;
}


@media screen and  (max-width: 768px){
   
    
    .cta{display: none;}
    .header{
        background: black;
        
    }
    .hamburger{
        display: block;
        height: 30px;
        width: 30px;
        position: absolute;
        top: 40px;
        right: 30px;
        cursor: pointer;
    }
    .hamburger span{ 
        background: white;
        height: 3px;
        width: 100%;
        display: block;
        margin-bottom: 5px;
    }
  
    .menu{ display: flex;
        padding-top: 30px;
        top: 0;
        right: 100%;
        position: absolute;
        background: black;
        height: 100vh;
        width: 100%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
       
        
        
    }
    .menu li { 
        display: flex;
        
        background-color: red;
        height: 40px;
        width: 140px;
        margin: 20px;
        text-align: center;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        
    }
    .menu.active{
        right: 0%;
    }

   
  
    .logo{
        width: 100px;
        height: 100px;
        }
    .logo img{
        width: 100%;
        height: auto;
    }    
     
 
}


/*! Hero section */

.hero{
    background: url(bg-test.jpg) no-repeat center center;
    background-size: cover;
    height: 100vh;
    display: flex; width: 100%; align-items: center;
    
}

.hero__content{
    
    width: 100%;
    max-width: 1350px;
    margin: 0 auto;
    padding: 30px;
    
}




@media  (max-width: 768px){

}



















*,
*:before,
*:after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;



}

<!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>Praise Amogus</title>

   

</head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="style.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet">

<body>


<div class="header">

<div class="logo">
<img src="logo3.png" alt="">
</div>


<ul class="menu">
    <li><a href="" class="link">Home</a></li>
    <li><a href="" class="link">Contact</a></li>
    <li><a href="" class="link">About us</a></li>
</ul>




<div class= "cta">

    <a href="" class= "button">Button</a>
</div>

</div>



  

<div class="hamburger">
    <span></span>
    <span></span>
    <span></span>

</div>
</div>

<!--hero e contenuti-->

<div class="hero">
    <div class="hero__content">
      <p class="intro-text">Testo Introduttivo</p>
      <h1 class="big-text">Titolo</h1>
      <a href="" class="button">Button 2</a>
     </div>
</div>












<script>src = script.js </script>

</body>
</html>

Answer 1

getElementsByClassName 函数 returns 一个数组。您应该添加 [0] 以获取元素。

此外，您在将脚本添加到您的页面时犯了错误。这是正确的变体：

<script type="text/javascript" src="path-to-javascript-file.js"></script>

为什么我的移动网站菜单不起作用？我的代码中有什么无效的地方？

Why doesn't my mobile site menu work? What is invalid in my code?

html

javascript

css

mobile

hamburger-menu