浏览器尺寸放大至767px以上时自动显示隐藏div的实现方案

这个问题的核心是内联样式的优先级高于CSS媒体查询规则：当你点击Close按钮时，会给#demo添加内联的style="display:none"，哪怕后续把窗口宽度拉到767px以上，媒体查询里的display: block也没法覆盖内联样式，所以div始终保持隐藏状态。

下面给你两种可行的解决方案：

方案1：用CSS类控制显示隐藏（推荐） #

这种方式更符合CSS的优先级逻辑，能让媒体查询正常生效，代码也更易维护。

修改后的完整代码如下：

#demo {
  display: block;
}

/* 新增一个控制隐藏的类 */
#demo.hidden {
  display: none;
}

@media screen and (max-width: 767px) {
  #demo {
    display: none;
  }
  /* 小屏状态下，即使手动添加了hidden类，也保持隐藏（可选，根据需求调整） */
  #demo.hidden {
    display: none;
  }
}

function openNav() {
  document.getElementById("demo").classList.remove("hidden");
}

function closeNav() {
  document.getElementById("demo").classList.add("hidden");
}

<div id="demo">Hello</div>
<span onclick="openNav()">Open</span>
<span onclick="closeNav()">Close</span>

原理：

• 当窗口宽度>767px时，CSS基础规则#demo { display: block; }生效；如果div没有hidden类就会显示，有则保持隐藏。
• 当窗口宽度≤767px时，媒体查询会强制隐藏div，不管有没有手动添加的hidden类，符合你的原始需求。

方案2：监听窗口resize事件 #

如果你不想改动CSS结构，可以通过监听窗口大小变化，自动恢复div的显示：

修改后的JS代码如下：

function openNav() {
  document.getElementById("demo").style.display = "block";
}

function closeNav() {
  document.getElementById("demo").style.display = "none";
}

// 监听窗口尺寸变化
window.addEventListener('resize', function() {
  const demoEle = document.getElementById("demo");
  // 当窗口宽度超过767px时，清除内联的display样式，让CSS媒体查询生效
  if (window.innerWidth > 767) {
    demoEle.style.display = '';
    // 也可以直接设置为block：demoEle.style.display = 'block';
  }
});

原理：每次窗口大小变化时检查宽度，一旦超过767px就清除内联的display:none，这样CSS里的媒体查询规则就能重新控制div的显示状态了。

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