如何用原生JS实现响应式导航栏点击链接或滚动时折叠

你的代码存在三处硬逻辑错误，直接导致功能不生效：

• 元素选择错误：document.querySelector('.nav-links li') 仅会匹配导航列表里的第一个<li>，得到的是单个元素而非可遍历的集合，后续写的links.forEach循环根本无法执行
• 事件绑定方式错误：
  1. 原生addEventListener不支持在第二个参数位置传入多个事件名的写法（这是jQuery的绑定逻辑，和原生API不兼容）
  2. 滚动事件的触发主体是浏览器视口（window对象），你把事件绑在汉堡按钮上，按钮本身永远不会触发滚动事件
• 点击收起逻辑为空：你在汉堡点击的回调里留了空的forEach循环，没有实际执行收起菜单的操作

直接替换原有JS代码即可，全程复用你现有的CSS过渡效果，不需要修改样式：

// 修正1：选中所有导航锚点链接，拿到可遍历的元素集合
const hamburger = document.querySelector('.nav-menu');
const navLinks = document.querySelector('.nav-links');
const allNavLinks = document.querySelectorAll('.nav-links li a');

// 保留原有汉堡按钮的开合切换逻辑
hamburger.addEventListener('click', () => {
  navLinks.classList.toggle('activate');
})

// 修正2：给每个导航链接绑定点击收起逻辑
allNavLinks.forEach(link => {
  link.addEventListener('click', () => {
    navLinks.classList.remove('activate');
  })
})

// 修正3：将滚动事件绑定到window对象，菜单展开时触发自动收起
window.addEventListener('scroll', () => {
  // 仅在菜单处于激活展开状态时执行操作，避免无意义的类名修改
  if(navLinks.classList.contains('activate')) {
    navLinks.classList.remove('activate');
  }
})

• 点击导航内任意链接时，会直接移除activate类，自动触发原有clip-path从1000px收缩回100px的1s过渡动画，和手动点击汉堡按钮关闭的视觉效果完全一致
• 页面发生滚动时，只要菜单处于展开状态就自动触发收起动画，不会在菜单已经关闭时重复执行无效操作
• 原生API实现，不依赖任何第三方库，不会影响原有桌面端导航的正常逻辑

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