如何在调整大小时关闭滑入式导航栏？

Question

我有一个响应式导航栏，它以一定的宽度折叠成汉堡菜单。 当我点击菜单时，链接从右侧滑入。 但是，当我将浏览器的大小调整为恢复标准导航栏的宽度，然后将浏览器的大小调整回导航折叠成汉堡菜单的宽度时，导航链接仍然存在，而不仅仅是菜单。 我需要它，这样即使我不手动关闭菜单，它也会在我调整回桌面宽度时关闭，如果我返回移动宽度，我将不得不再次打开菜单才能看到链接。 这只是一个问题，如果我打开菜单，不要关闭它，调整大小，然后返回。 如果我关闭它，调整大小，然后返回，当然导航链接不存在。

HTML

            <nav>
                <ul class="nav-links">
                    <li><a href="file.html" class="nav-link" id="active">Text</a></li>
                    <li><a href="file.html" class="nav-link">Text</a></li>
                    <li><a href="file.html" class="nav-link">Text</a></li>
                    <li><a href="file.html" class="nav-link">Text</a></li>
                    <li><a href="file.html" class="nav-link">Text</a></li>
                </ul>
            </nav>
            <div class="menu" onclick="closeFunction(this);">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>

CSS（滚动查看全部）

.nav-links {
    display: flex;
    justify-content: space-around;
    list-style: none;
}

.menu {
    display: none;
    cursor: pointer;
    margin-bottom: 4px;
    z-index: 2;
    opacity: .5;
    transition: .2s;
}

@media only screen and (max-width: 1200px) {
    .nav-links {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        right: 0px;
        align-items: center;
        background-color: var(--media-nav-links-background-color);
        z-index: 1;
        transform: translateX(100%);
    }

    .menu {
        display: block;
    }
}

.nav-active {
    transform: translateX(0%);
    transition: .4s;
}

JavaScript

const navSlide = () => {
    const menu = document.querySelector('.menu');
    const nav = document.querySelector('.nav-links');

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

navSlide();

我猜我应该在 JS 中添加一些东西。

新问题

@54ka 的回答有效。 但是，现在我遇到了同样的问题，但汉堡菜单 animation。单击时菜单栏变成 X，再次单击时又变回 X。 如果我单击菜单，X 出现，我调整大小然后返回，X 仍然存在，而不是菜单，然后当然与滑入的导航链接的同步被 b/c 再次抛出 @54ka 的答案解决了导航滑动。 我尝试将相同的解决方案应用于控制 X 转换的我的 JS，它起作用了，但随后取消了对原始问题的解决方案，导航链接现在不会在调整大小时关闭，即使这只是固定的。 很奇怪。

这是有关收盘价 function 的信息：

HTML

            <div class="menu" onclick="closeFunction(this);">
                <div class="line1"></div>
                <div class="line2"></div>
                <div class="line3"></div>
            </div>

CSS

.menu {
    display: none;
    cursor: pointer;
    margin-bottom: 4px;
    z-index: 2;
    opacity: .5;
    transition: .2s;
}

.menu:hover {
    opacity: 1;
}

.menu div {
    width: 25px;
    height: 2px;
    margin: 5px;
    background-color: var(--menu-div-background-color);
    transition: .4s;
}

.close .line1 {
    transform: rotate(-45deg) translate(-4px, 6px);
}

.close .line2 {
    opacity: 0;
}

.close .line3 {
    transform: rotate(45deg) translate(-4px, -6px);
}

JavaScript

function closeFunction(x) {
    x.classList.toggle('close');
}

我试过的JS

function closeFunction(x) {
    x.classList.toggle('close');

    window.onresize = function () {
        var w = window.outerWidth;
        if (w > 1200) {
            x.classList.remove('close');
        }
    };
}

再一次，我试过的这个 JS 解决了它，但后来它“解开了”，可以说是解决了我原来问题的 JS：

const navSlide = () => {
    const menu = document.querySelector('.menu');
    const nav = document.querySelector('.nav-links');

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

    window.onresize = function () {
        var w = window.outerWidth;
        if (w > 1200) {
            nav.classList.remove('nav-active');
        }
    };
}

有什么建议么？ 或许有一种方法可以合并这些 JavaScript，以便所有事情一起发生？

Answer 1

您需要为屏幕尺寸添加代码 window 侦听器，如果它超过指定值则移除nav-active

window.onresize = function () {
    var w = window.outerWidth;
    if (w > 1200) {
        nav.classList.remove('nav-active');
    }
};

例子：

在示例中，我将最大分辨率更改为 600px。 我删除onclick ="closeFunction (this);我不知道它做了什么，因为它没有在代码中定义它返回错误

 const navSlide = () => { const menu = document.querySelector('.menu'); const nav = document.querySelector('.nav-links'); menu.addEventListener('click', () => { nav.classList.toggle('nav-active'); }); window.onresize = function () { var w = window.outerWidth; if (w > 600) { nav.classList.remove('nav-active'); } }; } navSlide();

 .nav-links { display: flex; justify-content: space-around; list-style: none; }.menu { display: none; cursor: pointer; margin-bottom: 4px; z-index: 2; opacity: .5; transition: .2s; } @media only screen and (max-width: 600px) {.nav-links { position: absolute; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; /* right: 0px; */ align-items: center; background-color: var(--media-nav-links-background-color); z-index: 1; transform: translateX(100%); }.menu { display: block; width: 50px; height: 50px; background: #000; } }.nav-active { transform: translateX(0%); transition: .4s; }

 <nav> <ul class="nav-links"> <li><a href="file.html" class="nav-link" id="active">Text</a></li> <li><a href="file.html" class="nav-link">Text</a></li> <li><a href="file.html" class="nav-link">Text</a></li> <li><a href="file.html" class="nav-link">Text</a></li> <li><a href="file.html" class="nav-link">Text</a></li> </ul> </nav> <div class="menu" onclick=""> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div>

---

新任务的回答：

function closeFunction(x) {
    x.classList.toggle('close');
}

const navSlide = () => {
    const menu = document.querySelector('.menu');
    const nav = document.querySelector('.nav-links');

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

    window.onresize = function () {
        var w = window.outerWidth;
        if (w > 1200) {
            nav.classList.remove('nav-active');
            document.getElementsByClassName('menu')[0].setAttribute('class', 'menu');
        }
    };
}

navSlide();