Event Listener未对所有元素生效：仅首个nav_button可触发移动

• 第一处错误：使用document.querySelector(".nav_button")做样式修改操作，这个API的固定行为是仅返回DOM流中匹配选择规则的第一个元素，全程没有对当前点击的目标元素做操控，无论点击哪个标签，修改样式的目标永远是第一个.nav_button元素，自然只有第一个会移动。
• 第二处错误：状态判断变量navStatus声明在navToggle函数内部，每次触发函数时，这个变量都会被重新初始化为false，既无法跨函数调用记录之前的交互状态，也永远走不到状态为true的判断分支，即便修正元素选择逻辑，切换效果也会完全失效。

• 把点击事件的当前触发元素作为参数传入navToggle函数，替换原来全局选第一个元素的逻辑，实现对任意被点击按钮的单独操控。
• 把navStatus变量移到函数作用域外部，让它可以在多次函数调用间持久保存状态值。
• 补充a标签默认行为拦截，避免点击后触发默认页面跳转打断效果展示。

// 外部持久化的状态变量
let navStatus = false;

function navToggle(target) {
  if (!navStatus) {
    target.style.marginTop = "100px";
    navStatus = true;
  } else {
    target.style.marginTop = "0px";
    navStatus = false;
  }
}

document.querySelectorAll(".nav_button").forEach(a => {
  a.addEventListener("click", function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    navToggle(this);
  })
})

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