如何解决汉堡菜单在移动端页面刷新后自动打开的问题？

根因分析 #

• 移动端默认自动打开：HTML中默认给导航列表加了nav-active类、给汉堡按钮加了toggle类，移动端样式下这两个类会直接触发展开状态
• 切换视口后状态异常：没有监听窗口尺寸变化事件，手动操作修改的类名不会根据视口宽度自动重置

修复步骤 #

1. 修改HTML默认类 #

移除默认添加的激活类，保证初始状态符合预期：

<ul class="nav-links"> <!-- 删掉原来的nav-active -->
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
<div class="burger"> <!-- 删掉原来的toggle -->
    <div class="line1"></div>
    <div class="line2"></div>
    <div class="line3"></div>
</div>

如果需求是移动端默认打开菜单，这一步可以不用修改，直接调整后续JS逻辑即可

2. 补全桌面端基础CSS #

在媒体查询外添加桌面端默认样式，避免切换视口时样式错乱：

/* 桌面端默认样式 */
.nav-links {
    display: flex;
    /* 补充你原来桌面端导航的横向排列、间距等样式 */
}
.burger {
    display: none;
}

@media screen and (max-width:768px){
/* 保留你原来的移动端CSS代码 */
}

3. 修正JavaScript代码 #

原来的代码存在语法错误、事件监听位置错误、缺少resize监听的问题，修正后完整代码如下：

const navSlide = () =>  {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');

    // 汉堡点击切换逻辑
    burger.addEventListener('click', () => {
        nav.classList.toggle('nav-active');
        // 链接动画，注意模板字符串要用反引号包裹
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else{
                link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
            }
        });
        burger.classList.toggle('toggle');
    });

    // 监听窗口尺寸变化，自动重置状态
    window.addEventListener('resize', () => {
        // 桌面端宽度大于768px时清空移动端操作产生的激活类
        if(window.innerWidth > 768) {
            nav.classList.remove('nav-active');
            burger.classList.remove('toggle');
            navLinks.forEach(link => link.style.animation = '');
        } 
        // 如果需要切换回移动端时默认打开菜单，取消下面这段的注释即可
        // else {
        //     nav.classList.add('nav-active');
        //     burger.classList.add('toggle');
        // }
    });
}

// 调用函数让逻辑生效
navSlide();

效果验证 #

修复后可实现：

• 移动端打开页面初始状态符合预期，点击汉堡可正常切换展开收起
• 移动端手动关闭菜单后切换到桌面端，导航正常显示
• 桌面端切换回移动端时状态符合预期，无需刷新页面

内容的提问来源于stack exchange，提问作者Todd B