移动端点击切换导航显示状态后 放大窗口桌面端导航消失问题求助

问题原因 #

你通过JS直接修改nav的style.display属性，本质是给元素添加了内联样式，内联样式的优先级远高于CSS样式表中的媒体查询规则。因此当你在移动端将导航设为隐藏后，即使窗口切回桌面尺寸，CSS中桌面端的导航默认显示规则也无法覆盖内联的display: none，就会出现导航持续隐藏的问题。

另外你当前CSS中还有一处语法错误：nav选择器下的! width: 40%;写法错误，感叹号位置不对，会导致桌面端导航宽度失效，建议修改为width: 40%;。

推荐解决方案（通过类名控制显隐，兼容性好易维护） #

这种方案不会添加内联样式，所有显隐逻辑和媒体查询规则都放在CSS中统一管理，不会出现跨断点的样式冲突。

1. 修改CSS代码 #

在移动端媒体查询中新增导航显示的专属类规则：

@media only screen and (max-width: 600px) {
  /* 原有其他样式保持不变 */
  nav {
    width: 100%;
    display: none;
  }
  /* 新增：移动端下带这个类的导航强制显示 */
  nav.mobile-show {
    display: block;
  }
}

2. 修改JS切换逻辑 #

不再直接操作内联样式，改为切换导航的类名：

function myFunction() {
  const nav = document.getElementsByTagName("nav")[0];
  nav.classList.toggle('mobile-show');
}

备选方案（兼容原有逻辑） #

如果你不想修改现有切换逻辑，可以新增窗口尺寸监听事件，在切回桌面端时主动清除导航的内联样式：

function myFunction() {
  var x = document.getElementsByTagName("nav")[0];
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
// 新增窗口resize监听
window.addEventListener('resize', () => {
  const nav = document.getElementsByTagName("nav")[0];
  // 窗口宽度大于断点600px时清空内联display属性
  if (window.innerWidth > 600) {
    nav.style.display = '';
  }
})

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