点击汉堡按钮切换CSS类的JavaScript功能故障求助

AI 小北

2026-8-3

汉堡按钮切换导航栏样式与菜单展开的问题修复

需求说明

点击汉堡按钮时完成两组操作：

给.navbar添加sticky-costum-2类，让导航栏样式放大
展开菜单（通过给ul添加top-[80px]和opacity-100类）
再次点击时反向操作：移除样式类、收起菜单

现有问题代码

function Menu(e) {
  let list = document.querySelector('ul');
  e.name === 'menu' ? (e.name = "close", list.classList.add('top-[80px]'), list.classList.add('opacity-100')) : 
                      (e.name = "menu", list.classList.remove('top-[80px]'), list.classList.remove('opacity-100'))
  if (e) {
    $('.navbar').addClass("sticky-costum-2");
  } else {
    $('.navbar').removeClass("sticky-costum-2");
  }
};

问题核心：if(e)永远为真——e是触发点击的按钮元素，始终存在，所以永远只会执行添加类的操作，不会移除。

复用你之前的音频切换逻辑修复

你之前的音频播放/暂停功能，是通过判断audio.paused状态值来分支执行不同操作，这里可以完全照搬这个思路：通过按钮的name属性值（menu/close）来决定添加或移除类。

修复后的代码：

function Menu(e) {
  let list = document.querySelector('ul');
  const navbar = $('.navbar'); // 缓存DOM元素，避免重复查询
  
  if (e.name === 'menu') {
    // 切换为关闭状态：展开菜单+添加导航栏样式类
    e.name = "close";
    list.classList.add('top-[80px]', 'opacity-100');
    navbar.addClass("sticky-costum-2");
  } else {
    // 切换为菜单状态：收起菜单+移除导航栏样式类
    e.name = "menu";
    list.classList.remove('top-[80px]', 'opacity-100');
    navbar.removeClass("sticky-costum-2");
  }
};