求助：使用addEventListener的菜单按钮需两次点击才生效问题

我一眼就看出问题所在啦——你现在的代码混合了CSS类样式和内联样式来控制opacity，这直接导致第一次点击时判断逻辑出错了。

问题根源 #

页面加载时，#navi的opacity:0是通过CSS规则设置的，但x.style.opacity这个JS属性只能读取元素的内联样式（也就是写在元素标签上的style属性）。初始状态下#navi没有内联的opacity设置，所以第一次点击时x.style.opacity === "0"的判断结果是false，代码会执行else分支把内联样式设为opacity:0；第二次点击时，内联样式存在了，判断才会成立，才会切换到opacity:1。这就是为什么需要点击两次才能生效。

最优解决方案：统一用CSS类控制（推荐） #

这种方式更符合"样式与行为分离"的规范，也更易维护。

1. 修改JavaScript函数，只操作CSS类：

function toggleMenu() {
  var x = document.getElementById("navi");
  // 直接切换navigation类，不需要手动修改内联样式
  x.classList.toggle("navigation");
};

window.onload = function() {
  var click = document.getElementById("menuToggle")
  click.addEventListener("click", toggleMenu);
};

2. 调整CSS规则，确保过渡效果正常（顺便修复无效的width:-50%问题）：

#navi {
  opacity: 0;
  text-align: center;
  height: 40px;
  width: 100%; /* 把无效的-50%改成100%，或者你需要的宽度 */
  z-index: 1;
  transition: all 3s ease;
}

#navi.navigation {
  opacity: 1;
  /* 这里height和初始值一致，可以去掉避免冗余 */
}

备选方案：统一用内联样式判断 #

如果你坚持要保留原有的逻辑，那需要在页面加载时给#navi设置内联的opacity:0，这样第一次点击时判断就能生效：

window.onload = function() {
  var x = document.getElementById("navi");
  // 初始设置内联样式，让判断逻辑能识别
  x.style.opacity = "0";
  var click = document.getElementById("menuToggle")
  click.addEventListener("click", toggleMenu);
};

不过还是更推荐第一种方案，用CSS类来管理样式是更专业的做法哦。

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