桌面始终显示DIV、移动端点击切换DIV的显示异常问题求助

这个问题我之前做响应式项目时也踩过坑！核心问题在于你在移动端点击按钮给内容DIV添加的隐藏样式（不管是直接加内联display: none还是自定义类），优先级会高于CSS媒体查询里的桌面端显示规则，所以窗口放大后样式不会自动覆盖回来。下面给你一套完整的、能彻底解决问题的方案：

给两个DIV加上清晰的类名，方便后续样式和JS操作：

<div class="mobile-toggle-btn">点击切换内容</div>
<div class="content-container">
  这里是你要展示的所有信息内容...
</div>

通过媒体查询区分桌面端和移动端，同时用类来控制移动端的显示隐藏（不要直接用内联样式）：

/* 桌面端默认样式（屏幕宽度≥480px） */
.content-container {
  display: block;
}
.mobile-toggle-btn {
  display: none; /* 桌面端隐藏按钮 */
}

/* 移动端样式（屏幕宽度<480px） */
@media (max-width: 479px) {
  .content-container {
    display: none; /* 移动端默认隐藏内容 */
  }
  .mobile-toggle-btn {
    display: block;
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 10px;
  }
  /* 自定义类，用于JS切换显示状态 */
  .content-container.show {
    display: block;
  }
  .content-container.hidden {
    display: none;
  }
}

关键是要在窗口大小变化时，主动重置内容区的状态，确保桌面端始终显示内容：

const toggleBtn = document.querySelector('.mobile-toggle-btn');
const contentContainer = document.querySelector('.content-container');

// 处理按钮点击事件，切换内容显示状态
toggleBtn.addEventListener('click', () => {
  contentContainer.classList.toggle('show');
  contentContainer.classList.toggle('hidden');
});

// 监听窗口大小变化，修复跨端状态异常问题
// 加个防抖函数避免频繁触发，优化性能
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

window.addEventListener('resize', debounce(() => {
  const currentWidth = window.innerWidth;
  if (currentWidth >= 480) {
    // 切换到桌面端时，强制显示内容并重置类
    contentContainer.classList.add('show');
    contentContainer.classList.remove('hidden');
  }
}));

• 用类控制显示隐藏，比内联样式更容易管理，且不会和媒体查询的样式优先级冲突
• 窗口resize监听会主动检测屏幕宽度，一旦进入桌面端范围就强制重置内容区为显示状态，彻底避免移动端操作遗留的隐藏状态影响桌面端

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