jQuery toggleClass实现汉堡菜单点击无响应问题排查

你的代码存在三类核心错误，逐一修正即可正常运行：

JavaScript部分问题 #

• 第二种事件绑定写法语法错误：jQuery实例不存在onclick()方法，这是原生DOM对象的属性，jQuery绑定点击事件只能使用on('click', 回调)或者简写的click(回调)，该错误会直接阻断脚本执行。
• toggleClass参数错误：该方法接收纯类名字符串，不需要带类选择器前缀.，你写的toggleClass('.active')会给元素添加名为.active的非法类，和CSS选择器完全无法匹配，正确参数应为toggleClass('active')。
• 类名绑定目标错误：你当前逻辑是给汉堡按钮本身加active类，但你的预期是控制菜单展开，且HTML结构中根本不存在class为menu的元素，开头写的原生选择器const menuToggle = document.querySelector('.menu');完全选不到目标，可以直接删除。
• 优化：卡片的mouseenter、mouseleave事件可以合并绑定，减少重复代码。

修正后JS代码：

$(document).ready(function() {
  // 卡片hover效果合并写法
  $('.card').on('mouseenter mouseleave', function() {
    $(this).find(".inner-card").toggleClass('active');
  });

  // 汉堡菜单点击逻辑
  $('.hamburger-menu').on('click', function() {
    // 给导航列表切换active类，控制展开收起
    $('.nav-ul').toggleClass('active');
    // 若需要按钮本身有切换态，可追加：$(this).toggleClass('active');
  });
});

CSS部分问题 #

• 非法嵌套：原生CSS不支持类似Less/Sass的选择器嵌套写法，你在.hamburger-menu规则块内写的.menu.active样式完全不会被浏览器解析。
• 选择器不匹配：样式里写的.menu.active和HTML里实际的导航列表类名nav-ul对应不上。
• 缺少默认状态样式：移动端下导航列表没有写默认收起的样式，无法实现展开/收起的切换效果。
• 交互细节缺失：汉堡按钮没有设置手型光标，用户无法感知是可点击元素。

修正后CSS代码：

.hamburger-menu {
  display: none;
}

.nav-ul {
  transition: all 0.3s ease;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media only screen and (max-width: 886px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hamburger-menu {
    display: inline-block;
    cursor: pointer;
    z-index: 11; /* 保证按钮在展开的菜单上层，可点击收起 */
  }
  /* 移动端默认收起导航 */
  .nav-ul {
    position: fixed;
    top: 0;
    right: 0;
    height: 0;
    overflow: hidden;
    padding-top: 60px;
  }
  /* 导航展开态 */
  .nav-ul.active {
    height: 100%;
    width: 350px;
    background: white;
    z-index: 10;
  }
}

排查小技巧 #

如果交互仍有异常，直接打开浏览器开发者工具的Console面板，脚本语法错误会直接打印报错信息；同时可以在Elements面板观察点击时对应元素的class是否正常切换，快速定位是JS逻辑问题还是CSS样式问题。

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