点击链接时Overlay未随下拉菜单同步切换状态的技术问题

嘿，我一眼就看出问题所在啦——你现在的代码每次点击链接时，都会强制把overlay的display设为block，完全没考虑菜单当前是展开还是收起状态，所以第二次点击菜单关闭时，overlay自然不会跟着消失～

给你两种靠谱的解决方案，按需选就行：

方案1：根据菜单状态判断Overlay显示/隐藏 #

直接在切换菜单类之后，检查菜单是否处于展开状态，再对应设置overlay的display属性：

function navDeck() { 
  "use strict";
  // 先获取元素，避免重复查询DOM
  const dropdown = document.getElementById("myDropdown");
  const overlay = document.getElementById("overlay");
  
  // 切换菜单的展开类
  dropdown.classList.toggle("is-open");
  
  // 根据菜单的当前状态同步控制overlay
  if (dropdown.classList.contains("is-open")) {
    overlay.style.display = "block";
  } else {
    overlay.style.display = "none";
  }
}

方案2：用CSS类同步控制（更推荐） #

这种方法把样式控制交给CSS，JS只负责切换类，符合关注点分离的最佳实践，后期维护更方便：

首先在CSS里给overlay加一个控制显示的类：

#overlay {
  display: none;
  /* 你的其他overlay样式，比如背景色、透明度之类的 */
}

#overlay.overlay-active {
  display: block;
}

然后修改JS函数，同步切换overlay的类：

function navDeck() { 
  "use strict";
  const dropdown = document.getElementById("myDropdown");
  const overlay = document.getElementById("overlay");
  
  dropdown.classList.toggle("is-open");
  overlay.classList.toggle("overlay-active"); // 和菜单同步切换类
}

注意要确保overlay的初始HTML里没有overlay-active类，这样默认就是隐藏状态哦～

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