如何实现点击导航栏列表项后自动关闭导航栏？

你的现有代码仅实现了通过切换按钮控制导航栏的显示/隐藏，要实现点击链接后关闭导航栏，需给每个导航栏链接添加点击事件，触发后移除active类。

修改后的代码： #

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
// 获取所有导航栏链接
const navLinks = navbarLinks.querySelectorAll('a')

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

// 给每个链接添加点击事件
navLinks.forEach(link => {
  link.addEventListener('click', () => {
    navbarLinks.classList.remove('active')
  })
})

说明： #

• 通过querySelectorAll获取导航栏容器内的所有<a>标签
• 遍历每个链接，为它们添加点击事件监听器
• 点击任意链接时，直接移除导航栏的active类，实现关闭效果

如果你的导航栏链接不是直接的<a>标签（比如用了按钮或其他元素），只需把querySelectorAll('a')换成对应的选择器即可。

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