点击移动端Navbar内链接跳转新页面时自动关闭Navbar

问题出在页面跳转后会重新加载，之前Navbar的展开/收起状态没被保存，所以得用localStorage持久化状态，页面加载时读取状态并恢复。

修改后的JavaScript代码 #

const toggleButton = document.getElementsByClassName('hamburger')[0];
const navBarLinks = document.getElementsByClassName('nav-area')[0];
const MOBILE_THRESHOLD = 750; // 和CSS的媒体查询阈值保持一致

// 页面加载时恢复Navbar状态
window.addEventListener('load', () => {
    if (window.innerWidth <= MOBILE_THRESHOLD) {
        const isNavHidden = localStorage.getItem('navIsHidden');
        // 按保存的状态设置：true表示需要隐藏（加active类）
        if (isNavHidden === 'true') {
            navBarLinks.classList.add('active');
        } else {
            navBarLinks.classList.remove('active');
        }
    }
});

// 点击汉堡按钮时切换状态并保存
toggleButton.addEventListener('click', () => {
    navBarLinks.classList.toggle('active');
    // 把当前是否隐藏的状态存到localStorage
    const isHidden = navBarLinks.classList.contains('active');
    localStorage.setItem('navIsHidden', isHidden);
});

// 屏幕尺寸变化时适配：非移动端清除状态，保证Navbar正常显示
window.addEventListener('resize', () => {
    if (window.innerWidth > MOBILE_THRESHOLD) {
        localStorage.removeItem('navIsHidden');
        navBarLinks.classList.remove('active');
    }
});

代码说明 #

• 状态保存：每次点击汉堡按钮切换状态时，把当前Navbar是否隐藏（是否带active类）存入localStorage，跨页面跳转也能保留这个状态。
• 加载恢复：页面打开时，先判断是否是移动端屏幕，再读取localStorage里的状态，给Navbar设置对应的类，确保跳转后状态正确。
• 适配屏幕变化：如果用户把窗口拉大到桌面端，自动清除保存的状态并移除active类，避免影响桌面端Navbar的正常显示。

小提示 #

• 把MOBILE_THRESHOLD变量和CSS里的max-width:750px保持一致，后续改尺寸只需要修改这一个地方即可。
• 确保站点所有页面都引入这段JS代码，这样整个站点的Navbar状态就能统一。

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