移动端导航栏点击内部链接后无法自动关闭

你的问题出在重复使用了同一个id：HTML里所有导航链接都用了id="links"，但id必须是唯一的，所以getElementById只能抓到第一个链接，其他链接点击时根本不会触发你写的收起逻辑。

直接按下面的步骤改：

1. 修改HTML的链接标识 #

把所有导航链接的id="links"换成class="nav-link"，这样可以通过类名批量选择所有链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"/>

<button class="toggle-btn"><i class="fa-solid fa-bars"></i></button>

<div class="dropdown-menu">
  <ul>
    <li><a href="#home" class="nav-link">Home</a></li>
    <li><a href="#about" class="nav-link">About</a></li>
    <li><a href="#projects" class="nav-link">Projects</a></li>
    <li><a href="#contact" class="nav-link">Contact</a></li>
  </ul>
</div>

2. 更新JS逻辑，添加链接点击事件 #

在原来的JS代码后面，加入对所有导航链接的事件监听，点击时直接关闭菜单并切换回汉堡图标：

const toggleBtn = document.querySelector('.toggle-btn')
const toggleBtnIcon = document.querySelector('.toggle-btn i')
const dropDownMenu = document.querySelector('.dropdown-menu')
const navLinks = document.querySelectorAll('.nav-link') // 选中所有导航链接

// 原有的toggle按钮逻辑
toggleBtn.onclick = function() {
  dropDownMenu.classList.toggle('open')
  const isOpen = dropDownMenu.classList.contains('open')
  toggleBtnIcon.classList = isOpen ? 'fa-solid fa-xmark' : 'fa-solid fa-bars'
}

// 新增：导航链接点击后收起菜单
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    dropDownMenu.classList.remove('open')
    toggleBtnIcon.classList = 'fa-solid fa-bars'
  })
})

这样不管点击哪个导航链接，移动端菜单都会自动收起，按钮图标也会变回汉堡样式，同时页面正常滚动到对应区块。

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