响应式导航栏点击链接后自动关闭功能实现求助

数据老陈

2026-8-24

响应式导航栏点击链接自动关闭的解决方案

问题说明

已完成响应式导航栏开发，CSS、HTML及基础JS功能正常，仅需实现小屏幕模式下点击导航链接时自动关闭导航栏的功能。

解决方案

核心思路：给所有导航链接绑定点击事件，触发与汉堡按钮相同的关闭逻辑——收起导航菜单、恢复链接透明度、重置汉堡图标样式。

修改后的完整JavaScript代码

// navbar
const hamburger = document.querySelector(".hamburger");
const navLinks = document.querySelector(".nav-list");
const links = document.querySelectorAll(".nav-list li");
const navItems = document.querySelectorAll(".nav-item"); // 获取所有导航链接

// 汉堡按钮点击逻辑
hamburger.addEventListener('click', ()=>{
   //Animate Links
    navLinks.classList.toggle("open");
    links.forEach(link => {
        link.classList.toggle("fejd");
    });

    //Hamburger Animation
    hamburger.classList.toggle("toggle");
});

// 导航链接点击关闭逻辑
navItems.forEach(item => {
    item.addEventListener('click', () => {
        // 检查当前是否处于展开状态
        if(navLinks.classList.contains('open')){
            navLinks.classList.remove('open');
            links.forEach(link => {
                link.classList.remove('fejd');
            });
            hamburger.classList.remove('toggle');
        }
    });
});

代码说明

新增navItems变量，获取所有带有.nav-item类的导航链接
遍历每个导航链接，添加点击事件监听
点击时先判断导航菜单是否处于展开状态（是否包含open类），如果是则执行以下操作：
- 移除导航菜单的open类，收起菜单
- 移除所有列表项的fejd类，恢复初始透明度
- 移除汉堡按钮的toggle类，重置图标样式