使用classList toggle实现NavBar：汉堡菜单点击后nav-list无法展开求助

通常这种问题集中在两个核心点，直接对照代码排查即可：

1. JS未同步切换菜单容器的类
   你大概率只给汉堡图标执行了toggle类操作，却遗漏了对导航菜单（nav-list）的类切换。修改JS代码如下：

   const hamburger = document.querySelector('.hamburger');
   const navList = document.querySelector('.nav-list');
   
   hamburger.addEventListener('click', () => {
     hamburger.classList.toggle('active');
     navList.classList.toggle('active'); // 新增这行，同步触发菜单的类切换
   });
   

2. CSS未配置菜单显示/隐藏的类规则
   确保CSS里给nav-list的active类设置了正确的显示属性，比如移动端默认隐藏菜单，添加active类后展开：

   .nav-list {
     /* 默认隐藏样式，根据你的布局调整 */
     display: none;
     flex-direction: column;
     gap: 1rem;
     /* 其他默认样式 */
   }
   
   .nav-list.active {
     /* 激活时显示菜单 */
     display: flex;
   }
   

另外留意下元素选择器的类名是否拼写正确，比如nav-list有没有写成navList、类名大小写是否一致，这类细节也容易导致功能失效。

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