为什么当我点击汉堡时我的侧边栏没有出现 div

Question

我在我的 header class 中建立了一个导航列表，在 js 文件中也有一个函数可以切换另一个 class，这将使导航在点击时出现和消失在移动视图中 <768px。无法理解为什么 id 不能像现在这样在点击时显示，无法正常工作，请帮助。

const navSlide = () => {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav__list");

    burger.addEventListener("click", () => {
        nav.classList.toggle(".nav-active");
    });
}

const app = () => {
    navSlide();
}

html {
    font-size: 62.5%;
}

body {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
}

*,
*::after,
*::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

body {
    font-family: 'Rokkitt', serif;
    font-weight: 400;
    line-height: 1.7;
    color: #fff;
}

.header {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.15)), to(rgba(0, 0, 0, 0.15))), url(../img/hero-img.jpg);
    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url(../img/hero-img.jpg);
    background-size: cover;
    height: 100vh;
}

.nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    min-height: 4rem;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

.nav__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    width: 40%;
}

@media screen and (max-width: 1300px) {
    .nav__list {
        width: 50%;
    }
}

@media screen and (max-width: 1024px) {
    .nav__list {
        width: 65%;
    }
}

@media screen and (max-width: 768px) {
    .nav__list {
        position: absolute;
        right: 0;
        height: 50vh;
        top: 4rem;
        background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5)));
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 42%;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}

.nav__item {
    list-style-type: none;
}

@media screen and (max-width: 768px) {
    .nav__item {
        opacity: 0;
    }
}

.nav__link {
    color: #fff;
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: 700;
    font-size: 1.6rem;
}

.logo {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 2rem;
}

.burger {
    display: none;
    cursor: pointer;
}

.burger__line1, .burger__line2, .burger__line3 {
    width: 20px;
    height: 3px;
    background-color: #fff;
    margin: 3px;
}

@media screen and (max-width: 768px) {
    .burger {
        display: block;
    }
}

.nav-active {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transition: -webkit-transform 0.5s ease-in;
    transition: -webkit-transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
}

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Zakład Kamieniarski - Krzysztof Posiadała</title>

    <link href="https://fonts.googleapis.com/css2?family=Rokkitt:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">
</head>
<body>

    <section class="header">

        <nav class="nav">
            <div class="logo">
                <h4>The Nav</h4>
            </div>
            <ul class="nav__list">
                <li class="nav__item"><a href="#" class="nav__link">Strona Główna</a></li>
                <li class="nav__item"><a href="#" class="nav__link">O nas</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Oferta</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Kamień</a></li>
                <li class="nav__item"><a href="#" class="nav__link">Kontakt</a></li>
            </ul>
            <div class="burger">
                <div class="burger__line1"></div>
                <div class="burger__line2"></div>
                <div class="burger__line3"></div>
            </div>
        </nav>
    

        <div class="MainText">
            <h1 class="Company__name">
                Zakład Kamieniarski
            </h1>
            <h2 class="Company__owner">
                Krzysztof Posiadała
            </h2>
        </div>
    </section>

    <script src="js/main.js"></script>
</body>
</html>

无法弄清楚为什么我的 js 函数不起作用，当我点击汉堡时 class。nav-active 没有切换。

请帮忙

Answer 1

在您的 JS 中，您在 app 内部调用 navSlide()，但没有调用 app 函数。如果 app() 永远不会被调用，那么 navSlide() 永远不会被调用，如果 navSlide() 永远不会被调用，那么事件监听器永远不会被添加到你的汉堡中。

您只需拨打app()。

const navSlide = () => {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav__list");

    burger.addEventListener("click", () => {
        nav.classList.toggle("nav-active");
    });
}

const app = () => {
    navSlide();
}

app(); // add this

附带说明一下，您应该考虑将汉堡变成适当的 button 元素（使用 type="button"）。屏幕阅读器和键盘用户更容易访问。

为什么当我点击汉堡时我的侧边栏没有出现 div

Why is my sidebar not appearing when i click on burger div

html

javascript

css

function

nav