跟着视频学习，然后点击黄色区域，这个蓝色界面会关闭和打开，请问一下为什么点击没有反应
问题描述：
代码如下
```html
<html>
<head>
<meta charset="utf-8">
<title>Fullscreen Menu</title>
<link rel="stylesheet" href="day07.css">
</head>
<body>
<div id="toggleIcon" onclick="menuToggle()"></div>
<div id="menu-overlay">
<ul>
<li><a href="1">Home</a></li>
<li><a href="2">About</a></li>
<li><a href="3">Services</a></li>
<li><a href="4">Portfolio</a></li>
<li><a href="5">Out team</a></li>
<li><a href="6">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
function menuToggle(){
var nav = document.getElementById('menu-overlay');
nav.classList.toggle('active');
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
#menu-overlay{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgb(35, 149, 243);
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
transform: scale(0);
transition: 0.5s;
}
#menu-overlay .active{
transform: scale(1);
}
#menu-overlay ul{
position: relative;
}
#menu-overlay ul li{
position: relative;
list-style: none;
text-align: center;
display: block;
}
#menu-overlay ul li a{
position: relative;
text-decoration: none;
font-size: 3.5em;
padding: 0 10px;
color: #fff;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
#menu-overlay ul li a:before{
content: '';
position:absolute;
top: 50%;
left: 0;
width: 100%;
height: 8px;
background: #ff0;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition: 0.5s transform;
}
#menu-overlay ul li a:hover:before{
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: 0.5s transform;
}
#toggleIcon{
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #ff0 ;
z-index: 1;
cursor: pointer;
}
```
答
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="utf-8" />
<title>Fullscreen Menu</title>
</head>
<style>
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
}
.menu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(35, 149, 243);
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
transform: scale(0);
transition: 0.5s;
}
.active {
transform: scale(1);
}
.menu-overlay ul {
position: relative;
}
.menu-overlay ul li {
position: relative;
list-style: none;
text-align: center;
display: block;
}
.menu-overlay ul li a {
position: relative;
text-decoration: none;
font-size: 3.5em;
padding: 0 10px;
color: #fff;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
}
.menu-overlay ul li a:before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 8px;
background: #ff0;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition:all 0.5s;
}
.menu-overlay ul li a:hover:before {
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition:all 0.5s;
}
#toggleIcon {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background: #ff0;
z-index: 1;
cursor: pointer;
}
</style>
<body>
<div id="toggleIcon" onclick="menuToggle()"></div>
<div class="menu-overlay" >
<ul>
<li><a href="1">Home</a></li>
<li><a href="2">About</a></li>
<li><a href="3">Services</a></li>
<li><a href="4">Portfolio</a></li>
<li><a href="5">Out team</a></li>
<li><a href="6">Contact</a></li>
</ul>
</div>
<script type="text/javascript">
function menuToggle() {
// var nav = document.getElementById("menu-overlay");
var nav = document.querySelector(".menu-overlay")
console.log(nav.classList);
nav.classList.toggle("active");
}
</script>
</body>
</html>