本文介绍一种响应式交互方案：仅在屏幕宽度 ≤700px 时启用按钮点击切换内容显示/隐藏，当用户缩放窗口导致宽度超过该阈值时，自动重置为默认状态（隐藏下拉内容、显示主区域）。
本文介绍一种响应式交互方案：仅在屏幕宽度 ≤700px 时启用按钮点击切换内容显示/隐藏，当用户缩放窗口导致宽度超过该阈值时，自动重置为默认状态（隐藏下拉内容、显示主区域）。
实现这一效果的关键在于分离“媒体查询状态判断”与“用户交互逻辑”，并主动监听窗口尺寸变化以撤销不适用状态。原代码的问题在于：onclick 仅执行一次切换，未考虑 window.resize 后当前 DOM 状态可能已违反响应式规则（例如在手机上点开菜单后横屏或拖大浏览器窗口，此时本应禁用该交互）。
✅ 正确实现思路
-
点击逻辑仅在匹配
(max-width: 700px)时生效，且采用display的当前内联样式做状态判断（避免受 CSS 媒体查询干扰）； -
resize事件中强制校准状态：一旦matchMedia不再匹配（即宽度 >700px），立即隐藏下拉内容、显示主区域； - CSS 层面保持简洁：媒体查询仅用于初始状态控制，不参与运行时逻辑。
✅ 完整可运行代码示例
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html>⚠️ 注意事项
-
不要依赖
getComputedStyle()判断显隐：它会返回媒体查询生效后的计算值，无法区分是 JS 设置还是 CSS 规则应用的结果；应使用element.style.display检查内联样式。 -
matchMedia是响应式的：它会随窗口变化自动更新.matches，但需通过addEventListener('change')才能监听其切换（本例中因需同步 UI，直接在resize中检查更直观可靠）。 -
避免重复绑定：若脚本可能多次执行（如 SPA 路由复用），建议对
resize事件使用once: true或手动解绑，防止内存泄漏。 -
无障碍补充：生产环境建议为按钮添加
aria-expanded和aria-controls属性，并同步更新，提升可访问性。
该方案兼顾语义清晰、逻辑健壮与跨设备一致性，是构建响应式交互组件的推荐实践。
