纯JavaScript实现移动端点击列表项关闭折叠导航栏

JavaScript 实现方案 #

在你现有代码的基础上，只需给所有导航链接添加点击事件，触发时移除导航栏的active类即可，具体修改如下：

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]
// 获取所有导航列表中的链接元素
const navLinks = document.querySelectorAll('.navbar-links ul li a')

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

// 遍历每个导航链接，绑定点击关闭导航栏的事件
navLinks.forEach(link => {
    link.addEventListener('click', () => {
        // 移除active类，让导航栏恢复隐藏状态
        navbarLinks.classList.remove('active')
    })
})

原理说明

• 移动端下你的CSS设置了.navbar-links默认display: none，只有添加active类时才会display: flex显示导航栏。
• 通过querySelectorAll选中所有导航链接，给每个链接绑定点击事件，点击时直接移除active类，导航栏就会自动隐藏。
• 该代码在桌面端不会产生副作用，因为桌面端的.navbar-links样式不受active类控制，始终保持展开状态。

CSS 方案参考（局限性说明） #

纯CSS无法直接实现点击子元素（导航链接）修改父元素（.navbar-links）的类，因为CSS没有父选择器。如果想尝试纯CSS方案，只能借助:target伪类，但需要修改HTML结构且逻辑受限（比如只能针对单个锚点，无法适配多个导航项），因此优先推荐JavaScript方案。

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