javascript - 媒体查询 - 当我调整窗口大小时，响应式侧边菜单出现并迅速消失

问题描述

我创建了一个响应式侧边菜单，当我调整浏览器窗口大小时会出现该菜单。我的“问题”如下：当我调整浏览器窗口的大小时，这个侧边菜单会迅速出现和消失，没有点击相应的按钮......在其他情况下，一切正常，只有这个问题困扰着我。

有谁可以告诉我这个问题来自哪里？

var btn = document.querySelector(".toggle-btn");
var nav = document.querySelector(".nav");

btn.addEventListener("click", function () {
    btn.classList.toggle("nav-open");
    nav.classList.toggle("nav-open");
});

@media screen and (max-width: 1300px) {

    html,
    body {
        margin: 0px;
        padding: 0px;
    }

    .toggle-btn {
        height: 30px;
        width: 30px;
        position: relative;
        float: right;
        top: 10px;
        right: 20px;
        cursor: pointer;
        z-index: 1000;
    }

    .toggle-btn span {
        height: 3px;
        background-color: #2c3e50;
        width: 100%;
        position: absolute;
        top: 20px;
        left: 0;
        transition: .4s;
    }

    .toggle-btn span:before {
        content: '';
        height: 3px;
        background-color: #2c3e50;
        width: 100%;
        position: absolute;
        top: -10px;
        left: 0;
        transition: .4s;
    }

    .toggle-btn span:after {
        content: '';
        height: 3px;
        background-color: #2c3e50;
        width: 100%;
        position: absolute;
        top: 10px;
        left: 0;
        transition: .4s;
    }

    .menu {
        height: 1000px;
        background-color: #eeebec;
        width: 250px;
        position: absolute;
        right: 0px;
    }

    .menu a {
        color: text-align: center;
        display: block;
        padding-top: 30px;
    }

    .nav {
        margin-right: -250px;
        transition-duration: 0.4s;
    }

    .nav-open {
        margin-right: 0px;
        transition-duration: 0.4s;
    }

    .toggle-btn.nav-open span {
        background: rgba(0, 0, 0, 0);
    }

    .toggle-btn.nav-open span:before {
        top: 0;
        transform: rotate(45deg);
    }

    .toggle-btn.nav-open span:after {
        top: 0;
        transform: rotate(-45deg);
    }
}

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Toggle Button</title>
    <link rel="stylesheet" href="btn.css">
</head>

<body>
    <div class="toggle-btn">
        <span></span>
    </div>

    <div class="menu nav">
        Blah
        Blah
        Blah
    </div>

    <script src="btn.js"></script>
</body>

</html>

    transform: rotate(45deg);
}

.toggle-btn.nav-open span:after {
    top: 0;
    transform: rotate(-45deg);
}

}

标签： javascripthtmlcssmedia-queriesside-menu

javascript - 媒体查询 - 当我调整窗口大小时，响应式侧边菜单出现并迅速消失

问题描述

解决方案

推荐阅读