响应式页面JS问题：窗口大小变化后desktop-links显示异常修复

问题根源 #

当前代码仅在点击shareBtn时判断窗口尺寸切换状态，但未监听窗口resize事件，导致窗口尺寸变化时无法自动同步元素的显示状态：

1. 桌面端打开desktop-links后缩小窗口到移动端，active类未被移除，容器仍可见
2. 移动端加载后放大到桌面端，未自动触发桌面端的状态逻辑，需刷新才生效

修复方案 #

1. 优化CSS：用媒体查询强制控制不同尺寸下的显示规则

通过CSS媒体查询确保基础响应式逻辑生效，避免JS失效时的显示错误，同时覆盖类样式的优先级：

/* 默认隐藏desktop-links */
.desktop-links {
  display: none;
}

/* 桌面端（≥1000px）：仅当有active类时显示 */
@media (min-width: 1000px) {
  .desktop-links.active {
    display: block;
  }
}

/* 移动端（<1000px）：强制隐藏desktop-links，忽略active类 */
@media (max-width: 999px) {
  .desktop-links {
    display: none !important;
  }
}

.active {
  display: block;
}

.in-active {
  display: none;
}

2. 完善JS：添加resize监听与状态同步逻辑

新增状态同步函数，在页面初始化和窗口尺寸变化时自动调整元素状态：

const desktopLinks = document.querySelector('.desktop-links');
const phoneLinks = document.querySelector('.phone-links');
const profile = document.querySelector('.profile');
const shareBtn = document.querySelector('.shareBtn');

// 同步不同尺寸下的元素显示状态
function syncLinksState() {
  if (window.innerWidth < 1000) {
    // 切换到移动端：移除desktop-links的active类，确保隐藏
    desktopLinks.classList.remove('active');
    // 可选：重置移动端元素状态（根据需求调整）
    // phoneLinks.classList.remove('active');
    // profile.classList.remove('in-active');
  } else {
    // 切换到桌面端：重置移动端元素状态
    phoneLinks.classList.remove('active');
    profile.classList.remove('in-active');
  }
}

// 页面加载时初始化状态
syncLinksState();

// 点击事件逻辑保持不变
shareBtn.addEventListener('click', () => {
  if (window.innerWidth < 1000) {
    phoneLinks.classList.toggle('active');
    profile.classList.toggle('in-active');
  } else {
    desktopLinks.classList.toggle('active');
  }
});

// 监听窗口 resize 事件，实时同步状态
window.addEventListener('resize', syncLinksState);

说明 #

• CSS媒体查询作为基础控制，确保即使JS未加载，元素也能按响应式规则显示
• resize事件监听解决了窗口尺寸变化后的状态不同步问题
• 使用classList.remove清除残留的类状态，避免显示异常

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