如何精简汉堡菜单的JavaScript实现逻辑？

你的现有汉堡菜单JS逻辑可以精简，优化后不仅代码更短，还能修复原代码隐藏的逻辑bug。

原代码可优化点 #

• 声明的homePage变量全程未使用，属于冗余代码
• 菜单点击关闭的判断逻辑存在错误：e.target.classList是类名集合对象，无法直接和字符串做等值判断，会导致该逻辑永远触发，点击菜单按钮时也会误执行关闭操作
• 三个元素重复执行classList增删/切换操作，代码冗余度高

方案1：不改动现有CSS，仅精简JS #

// 批量获取DOM元素，减少重复代码
const [hamburgerMenu, hamburger, menuList] = ['.menu-btn', '.hamburger', '.menu-list'].map(document.querySelector.bind(document))
// 封装统一的active类操作方法
const setActive = (action) => [hamburgerMenu, hamburger, menuList].forEach(el => el.classList[action]('active'))

hamburgerMenu.onclick = () => setActive('toggle')
// 仅点击菜单内导航链接时关闭菜单
menuList.onclick = e => e.target.tagName === 'A' && setActive('remove')

方案2：小幅度调整CSS，实现极致精简JS #

你只需要修改两处CSS选择器，就能进一步压缩JS代码：

1. 把原CSS中.hamburger.active修改为.menu-btn.active .hamburger
2. 把原CSS中.menu-list.active修改为.menu-btn.active ~ .menu-list

修改完成后，仅需要下面几行JS就能实现完全一致的效果：

const hamburgerMenu = document.querySelector('.menu-btn')
hamburgerMenu.onclick = () => hamburgerMenu.classList.toggle('active')
document.querySelector('.menu-list').onclick = e => e.target.tagName === 'A' && hamburgerMenu.classList.remove('active')

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