页面加载后点击.current-pet-icon需双击触发菜单的问题求助

问题根源 #

1. 初始样式判断失效：页面加载后，openedNav.style.display是空字符串（而非预期的"none"），首次点击时openedNav.style.display === "none"不成立，会执行else分支将其设为"none"，第二次点击才会触发显示逻辑。
2. 逻辑语法错误：shadowNav的点击事件中使用了赋值操作openedNav.style.display = "block"而非比较操作===，导致每次点击都强制赋值，逻辑判断完全失效。

修复方案 #

推荐用CSS类控制显示隐藏，比直接操作style.display更可靠且易维护：

步骤1：添加CSS类

给目标元素初始设置隐藏状态：

.hidden {
  display: none !important;
}

（给.nav-popout和.shadow-nav标签添加hidden类作为初始状态）

步骤2：修改JS代码

通过切换类来控制显示隐藏：

const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');

menuToggle.addEventListener('click', () => {
  openedNav.classList.toggle('hidden');
  shadowNav.classList.toggle('hidden');
});

shadowNav.addEventListener('click', () => {
  openedNav.classList.add('hidden');
  shadowNav.classList.add('hidden');
});

替代方案（不修改CSS）

如果不想新增CSS类，可通过getComputedStyle获取元素实际生效的样式：

const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');

menuToggle.addEventListener('click', () => {
  const currentDisplay = window.getComputedStyle(openedNav).display;
  if (currentDisplay === "none") {
    openedNav.style.display = "block";
    shadowNav.style.display = "block";
  } else {
    openedNav.style.display = "none";
    shadowNav.style.display = "none";
  }
});

shadowNav.addEventListener('click', () => {
  const currentDisplay = window.getComputedStyle(openedNav).display;
  if (currentDisplay === "block") {
    openedNav.style.display = "none";
    shadowNav.style.display = "none";
  }
});

说明 #

用CSS类的方式更符合前端开发最佳实践，避免直接操作内联样式，同时彻底解决首次点击的判断逻辑问题，也修复了shadowNav事件中的语法错误。

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