jQuery转Vanilla JS导航栏动画代码失效，求排查功能差异

问题描述 #

我正在实现点击汉堡按钮后显示屏幕外导航栏的动画效果，最初用jQuery写的版本完全正常，但改用原生JavaScript重写后功能失效了。下面是我的代码：

原jQuery代码

$(document).ready(function(){
  $('#hambBtn').click(function(){
    $('#hambBtn span').toggleClass('active')
    $('#menuWrapper').toggleClass('active')
  })
})

当前Vanilla JS代码

const hamb-btn = document.querySelector("#hambBtn");
hamb-btn.addEventListener("click", animateHamb);
function animateHamb(){
  const hambSpan = document.querySelector(".hamb-btn");
  const menuWrap = document.querySelector("#menuWrapper");
  hambSpan.classList.toggle("active");
  menuWrap.classList.toggle("active");
}

问题分析：jQuery与Vanilla JS代码的关键差异 #

你的原生JS代码有三个核心问题，导致它无法复刻jQuery版本的功能：

• 缺少DOM加载完成的监听
  jQuery的$(document).ready()会等待整个DOM树渲染完成后再执行内部代码，确保能正常获取到目标元素。如果你的原生JS代码放在<head>标签里，会在DOM还没渲染出#hambBtn的时候就执行，导致hamb-btn变量为null，根本无法绑定点击事件。

• 非法的变量命名
  JavaScript里变量名不能包含连字符（-），const hamb-btn是语法错误，浏览器会直接报错中断执行，应该改用驼峰命名法（比如hambBtn）或者下划线命名（hamb_btn）。

• 错误的元素选择器
  原jQuery代码是给#hambBtn内部的<span>元素切换active类，但你的原生JS代码里用了document.querySelector(".hamb-btn")——这里用了类选择器.hamb-btn，和原代码的#hambBtn span完全不符，导致找不到目标<span>元素，自然无法切换类实现动画。

修正后的Vanilla JS代码 #

// 等待DOM加载完成后执行，确保能获取到目标元素
document.addEventListener('DOMContentLoaded', function() {
  // 修正变量名，正确获取汉堡按钮
  const hambBtn = document.querySelector("#hambBtn");
  hambBtn.addEventListener("click", animateHamb);

  function animateHamb(){
    // 匹配jQuery的选择器，正确获取按钮内的span元素
    const hambSpan = document.querySelector("#hambBtn span");
    const menuWrap = document.querySelector("#menuWrapper");
    hambSpan.classList.toggle("active");
    menuWrap.classList.toggle("active");
  }
});

额外优化建议 #

如果你的脚本是放在<body>标签的末尾（</body>之前），其实可以省略DOMContentLoaded监听，因为此时DOM已经完全加载完成了，代码会更简洁：

const hambBtn = document.querySelector("#hambBtn");
hambBtn.addEventListener("click", animateHamb);

function animateHamb(){
  const hambSpan = document.querySelector("#hambBtn span");
  const menuWrap = document.querySelector("#menuWrapper");
  hambSpan.classList.toggle("active");
  menuWrap.classList.toggle("active");
}

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