本文介绍如何使用 JavaScript 结合 window.matchMedia 实现：仅在屏幕宽度 ≤700px 时响应按钮点击展开内容，且当用户缩放窗口至宽屏后自动收起并还原初始布局。
本文介绍如何使用 javascript 结合 `window.matchmedia` 实现：仅在屏幕宽度 ≤700px 时响应按钮点击展开内容，且当用户缩放窗口至宽屏后自动收起并还原初始布局。
要实现“仅在小屏下可点击展开、大屏下强制隐藏”的交互逻辑，关键在于分离行为控制与样式声明：CSS 负责默认状态（如小屏下隐藏），JavaScript 负责动态响应用户操作和视口变化。原代码的问题在于：点击逻辑未校验当前媒体查询状态，且缺少对窗口缩放事件的监听，导致缩放后 DOM 的 style.display 值被手动设置“锁定”，覆盖了 CSS 媒体查询本应生效的规则。
✅ 正确实现方案
1. 精简 CSS，移除冗余覆盖
/* 移除重复的 media query，保留语义清晰的默认状态 */
#dropdown-content {
display: none; /* 默认隐藏 */
}
@media only screen and (max-width: 700px) {
#dropdown-content {
display: none; /* 小屏下仍默认隐藏，由 JS 控制显隐 */
}
}
⚠️ 注意：无需在 CSS 中为
#dropdown-content设置display: block—— 显隐完全交由 JS 在匹配小屏时动态控制，避免样式冲突。
2. 点击函数：仅在小屏下执行切换
function myFunction() {
const dropdown = document.getElementById('dropdown-content');
const landing = document.getElementById('landing');
const mediaQuery = window.matchMedia('(max-width: 700px)');
// 仅当处于小屏环境时才响应点击
if (mediaQuery.matches) {
// 切换 dropdown 显示状态（兼容初始无内联样式的场景）
const isHidden = dropdown.style.display === 'none' || !dropdown.style.display;
dropdown.style.display = isHidden ? 'block' : 'none';
// 同步更新 landing 状态
landing.style.display = isHidden ? 'none' : 'block';
}
}
3. 监听窗口缩放：自动恢复大屏布局
window.addEventListener('resize', () => {
const dropdown = document.getElementById('dropdown-content');
const landing = document.getElementById('landing');
const mediaQuery = window.matchMedia('(max-width: 700px)');
// 当离开小屏范围（即宽度 > 700px）时，强制重置为默认布局
if (!mediaQuery.matches) {
dropdown.style.display = 'none';
landing.style.display = 'block';
}
});
4. HTML 结构（保持简洁）
<button onclick="myFunction()">About</button> <div id="dropdown-content">这里是下拉内容</div> <div id="landing">这里是首页内容</div>
? 关键要点总结
-
window.matchMedia()是响应式 JS 的核心：它返回一个MediaQueryList对象，其.matches属性实时反映当前媒体查询是否成立，比轮询window.innerWidth更高效、更语义化。 -
避免内联样式污染 CSS 媒体查询：手动设置
element.style.display会覆盖 CSS 规则；因此必须在大屏时主动清除该内联样式（或设为''），但本方案采用“显式重置”更稳妥。 -
resize 事件需防抖（进阶建议）：高频触发可能影响性能，生产环境可添加简易防抖：
let resizeTimer; window.addEventListener('resize', () => { clearTimeout(resizeTimer); resizeTimer = setTimeout(() => { /* 执行重置逻辑 */ }, 150); });
通过以上结构，你将获得一个健壮、可维护的小屏专属交互组件：点击生效、缩放自适应、样式与逻辑职责分明。
