CSS和Javascript的汉堡菜单和图片库问题

Question

我在一个网站上工作时，正在学习两个youtube教程。一个教程是关于建立一个完整的响应式网站，第二个教程是创建一个网格布局的图像库。当我完成我的网站工作时，最终的结果看起来不错，但我注意到了两个问题。

当你缩小网站的大小，使其占据你屏幕的一半时，导航栏就会缩小，你就会得到汉堡菜单。但是点击汉堡并没有像它应该打开的那样打开它。有一个eventListener应该添加和删除一个名为active的类，但什么都没有发生。

这是包含导航栏和汉堡图标的html代码

<header>
<a href="#" class="logo">Glitta Art Studio</a>
<div class="bx bx-menu" id="menu-icon"></div>
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</header>

这是媒体查询的CSS

@media(max-width: 1140px) {
section {
padding: 50px 8%;
}
#menu-icon {
display: initial;
color: var(--text-color);
}
header .navbar {
position: absolute;
top: -400px;
left: 0;
right: 0;
display: flex;
flex-direction: column;
text-align: center;
background: #2b2640;
transition: .3s;
}
header .navbar .active {
top: 70px;
}
.navbar a {
padding: 1.5rem;
display: block;
}
.col {
width: 50%;
margin-bottom: 10px;
}
}

这是JavaScript

let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
menu.addEventListener("click", function () {
navbar.classList.toggle("active")
});
window.onscroll = () => {
navbar.classList.remove("active");
};

从技术上讲，第二个问题没有导航那么大，但到目前为止，它对我来说更烦人。当你把鼠标移到图库部分的一张图片上时，图片上会出现一个白色框，上面有图片的标题和一些信息。但出于某种原因，教程中的人在这些框中的文本中添加了一个标签，我不假思索地盲目地将其添加到了我的项目中。点击框会让你回到主页，所以我想完全摆脱它，不让它链接到任何东西。我不确定CSS的问题是什么，但如果你试图删除html中的a标签，并用普通的p标签替换它们，那么它就会完全破坏图像网格，它们都会卡在屏幕的一侧。

这是图库的HTML代码(有10个与此完全相同的div，具有相同的填充文本和临时图像(

<div class="image-gallery">
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
<a href="">Painting Title</a>
</h3>
<span class="category">
<a href="">text about piece here</a>
</span>
</div>
</div>
</div>
<div class="image-box">
<img src="img/paintbrush.jpeg" alt="paintbrush">
<div class="overlay">
<div class="details">
<h3 class="title">
<a href="#">Painting Title</a>
</h3>
<span class="category">
<a href="#">text about piece here</a>
</span>
</div>
</div>
</div>

这是CSS

.gallery {
margin: 0;
padding: 0;
position: relative;
}
.image-gallery {
width: 100%;
max-width: 950px;
margin: 0 auto;
padding: 50px 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
grid-auto-rows: 250px;
grid-auto-flow: dense;
grid-gap: 20px;
}
.image-gallery .image-box {
position: relative;
background-color: #d7d7d8;
overflow: hidden;
}
.image-gallery .image-box:nth-child(7n + 1){
grid-column: span 2;
grid-row: span 2;
}
.image-gallery .image-box img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.image-gallery .image-box:hover img {
transform: scale(1.1);
}
.image-gallery .image-box .overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #fafaf2;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.5s ease;
z-index: 1;
}
.image-gallery .image-box:hover .overlay {
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
opacity: 1;
}
.image-gallery .image-box .details {
text-align: center;
}
.image-gallery .image-box .details .title {
margin-bottom: 8px;
font-size: 24px;
font-weight: 600;
position: relative;
top: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box .details .category {
font-size: 18px;
font-weight: 400;
position: relative;
bottom: -5px;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.image-gallery .image-box:hover .details .title {
top: 0px;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box:hover .details .category {
bottom: 0;
opacity: 1;
visibility: visible;
transition: all 0.3s 0.2s ease;
}
.image-gallery .image-box .details .title a,
.image-gallery .image-box .details .category a {
color: #222222;
text-decoration: none;
}

很抱歉问了这些基本问题。我已经很久没有练习编码了，所以我忘记了很多事情。

编辑：我修复了图库问题。现在，我必须处理的汉堡问题

Answer 1

您可以尝试在HTML元素中隐含如下函数：

<div class="bx bx-menu" id="menu-icon" onclick="ToggleClassActive()"></div>

并且您需要删除eventlistener函数并使用它来代替

function ToggleClassActive(){
let menu = document.querySelector("#menu-icon");
let navbar = document.querySelector(".navbar");
navbar.classList.toggle("active");
}

您还需要确保脚本在元素之后(放置脚本的最佳位置就在之前

你能展示一下控制台中发生的错误吗