CSS & Javascript问题与汉堡包菜单和图片库

Question

当我在一个网站上工作的时候，我正在关注youtube上的2篇教程。一个教程是关于建立一个完整的网站，这是响应，第二个是关于创建一个图像画廊与网格布局。最终的结果，当我完成我的网站工作时，看上去不错，但我注意到了两个问题。

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

这是html代码，其中包含了navbar和汉堡包图标。

<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>

而您需要删除事件侦听器函数并使用它

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

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

请显示控制台中发生的错误。