如何在移动端点击展开内容，并在窗口缩放超出阈值时自动隐藏-js教程-PHP中文网

如何在移动端点击展开内容，并在窗口缩放超出阈值时自动隐藏

本文介绍一种响应式交互方案：仅在屏幕宽度 ≤700px 时启用按钮点击切换内容显示/隐藏，当用户缩放窗口导致宽度超过该阈值时，自动重置为默认状态（隐藏下拉内容、显示主区域）。

本文介绍一种响应式交互方案：仅在屏幕宽度 ≤700px 时启用按钮点击切换内容显示/隐藏，当用户缩放窗口导致宽度超过该阈值时，自动重置为默认状态（隐藏下拉内容、显示主区域）。

实现这一效果的关键在于分离“媒体查询状态判断”与“用户交互逻辑”，并主动监听窗口尺寸变化以撤销不适用状态。原代码的问题在于：onclick 仅执行一次切换，未考虑 window.resize 后当前 DOM 状态可能已违反响应式规则（例如在手机上点开菜单后横屏或拖大浏览器窗口，此时本应禁用该交互）。

✅ 正确实现思路

点击逻辑仅在匹配 (max-width: 700px) 时生效，且采用 display 的当前内联样式做状态判断（避免受 CSS 媒体查询干扰）；
resize 事件中强制校准状态：一旦 matchMedia 不再匹配（即宽度 >700px），立即隐藏下拉内容、显示主区域；
CSS 层面保持简洁：媒体查询仅用于初始状态控制，不参与运行时逻辑。

✅ 完整可运行代码示例



  <style>
    #dropdown-content, #landing {
      padding: 1rem;
      margin: 0.5rem 0;
      border: 1px solid #ccc;
    }
    #dropdown-content {
      display: none; /* 默认隐藏 */
    }
    @media only screen and (max-width: 700px) {
      #dropdown-content {
        display: none; /* 移动端初始仍隐藏，由 JS 控制显隐 */
      }
    }
  </style><button onclick="myFunction()">About</button>
<div id="dropdown-content">
  <h3>About Us</h3>
  <p>This is the mobile-only dropdown content.</p>
</div>
<div id="landing">
  <h2>Welcome to Our Site</h2>
  <p>This is the main landing content shown on desktop & by default.</p>
</div>

<script>
function myFunction() {
  const dropdown = document.getElementById('dropdown-content');
  const landing = document.getElementById('landing');
  const mediaQuery = window.matchMedia('(max-width: 700px)');

  // 仅在移动断点内响应点击
  if (mediaQuery.matches) {
    // 切换 dropdown 显隐（兼容初始无 style.display 的情况）
    const shouldShow = dropdown.style.display !== 'block';
    dropdown.style.display = shouldShow ? 'block' : 'none';
    landing.style.display = shouldShow ? 'none' : 'block';
  }
}

// 窗口缩放时自动恢复桌面态
window.addEventListener('resize', () => {
  const dropdown = document.getElementById('dropdown-content');
  const landing = document.getElementById('landing');
  const mediaQuery = window.matchMedia('(max-width: 700px)');

  if (!mediaQuery.matches) {
    // 超出移动断点 → 强制隐藏下拉、显示主区
    dropdown.style.display = 'none';
    landing.style.display = 'block';
  }
});

// 可选：页面加载时也校准一次（防止 SSR 或缓存导致状态错乱）
window.addEventListener('load', () => {
  const mediaQuery = window.matchMedia('(max-width: 700px)');
  if (!mediaQuery.matches) {
    document.getElementById('dropdown-content').style.display = 'none';
    document.getElementById('landing').style.display = 'block';
  }
});
</script>

⚠️ 注意事项

不要依赖 getComputedStyle() 判断显隐：它会返回媒体查询生效后的计算值，无法区分是 JS 设置还是 CSS 规则应用的结果；应使用 element.style.display 检查内联样式。
matchMedia 是响应式的：它会随窗口变化自动更新 .matches，但需通过 addEventListener('change') 才能监听其切换（本例中因需同步 UI，直接在 resize 中检查更直观可靠）。
避免重复绑定：若脚本可能多次执行（如 SPA 路由复用），建议对 resize 事件使用 once: true 或手动解绑，防止内存泄漏。
无障碍补充：生产环境建议为按钮添加 aria-expanded 和 aria-controls 属性，并同步更新，提升可访问性。