JavaScript窗口判断条件失效求助：无法使用媒体查询需按钮触发

嘿，我来帮你搞定这个导航栏切换的问题！从你的描述来看，核心问题应该是窗口尺寸判断的逻辑没处理好，加上resize事件触发频繁可能导致状态混乱，还有按钮触发时没同步适配窗口状态。下面给你一套完整的修复方案：

核心问题排查方向 #

通常遇到这种失效问题，大概率是这几个原因：

• 没有正确监听resize事件，或者事件触发时逻辑执行太频繁导致卡顿/失效
• 判断窗口尺寸的条件写反了，或者临界值没匹配需求
• 切换导航状态时没有做状态缓存，导致重复添加/移除类名
• 按钮触发事件没有结合当前窗口尺寸，导致操作不符合预期

完整修复后的代码示例 #

HTML 结构 #

<!-- 顶部导航栏 -->
<nav class="top-nav">
  <button id="toggleNav" class="toggle-btn">☰ 菜单</button>
  <ul class="nav-links">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</nav>

<!-- 侧边栏导航（默认隐藏） -->
<div class="sidebar-nav">
  <button id="closeSidebar" class="close-btn">×</button>
  <ul class="sidebar-links">
    <li><a href="#home">首页</a></li>
    <li><a href="#about">关于</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系</a></li>
  </ul>
</div>

CSS 样式 #

/* 全局基础样式 */
body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Arial;
  scroll-behavior: smooth;
  background: linear-gradient(#e6e6e6, white);
}

/* 顶部导航样式 */
.top-nav {
  width: 100%;
  background: #333;
  padding: 1rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-nav .toggle-btn {
  display: none; /* 默认隐藏按钮，JS控制显示 */
  background: #555;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.top-nav .nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

.top-nav .nav-links a {
  color: white;
  text-decoration: none;
}

/* 侧边栏样式 */
.sidebar-nav {
  position: fixed;
  top: 0;
  left: -100%; /* 默认隐藏在左侧 */
  width: 250px;
  height: 100vh;
  background: #333;
  transition: left 0.3s ease;
  z-index: 1000;
}

.sidebar-nav.active {
  left: 0; /* 激活时显示 */
}

.sidebar-nav .close-btn {
  background: #555;
  color: white;
  border: none;
  padding: 1rem;
  text-align: right;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.sidebar-nav .sidebar-links {
  list-style: none;
  margin: 0;
  padding: 1rem;
}

.sidebar-nav .sidebar-links li {
  margin-bottom: 1rem;
}

.sidebar-nav .sidebar-links a {
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

JavaScript 逻辑（核心修复部分） #

// 定义临界尺寸：当窗口宽度小于这个值时切换为侧边栏
const BREAKPOINT = 768;
// 缓存DOM元素
const toggleBtn = document.getElementById('toggleNav');
const closeSidebarBtn = document.getElementById('closeSidebar');
const topNav = document.querySelector('.top-nav');
const sidebarNav = document.querySelector('.sidebar-nav');
// 缓存当前导航状态，避免重复操作
let isSidebarActive = false;

// 防抖函数：避免resize事件频繁触发导致逻辑混乱
function debounce(func, delay = 200) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 核心导航切换逻辑
function updateNavigationState() {
  const windowWidth = window.innerWidth;
  
  if (windowWidth < BREAKPOINT) {
    // 小屏幕：显示切换按钮，隐藏顶部导航链接，确保侧边栏状态匹配缓存值
    toggleBtn.style.display = 'block';
    topNav.querySelector('.nav-links').style.display = 'none';
    sidebarNav.classList.toggle('active', isSidebarActive);
  } else {
    // 大屏幕：隐藏切换按钮和侧边栏，显示顶部导航链接，重置状态
    toggleBtn.style.display = 'none';
    topNav.querySelector('.nav-links').style.display = 'flex';
    sidebarNav.classList.remove('active');
    isSidebarActive = false;
  }
}

// 按钮点击事件：切换侧边栏状态
toggleBtn.addEventListener('click', () => {
  isSidebarActive = !isSidebarActive;
  sidebarNav.classList.toggle('active', isSidebarActive);
});

closeSidebarBtn.addEventListener('click', () => {
  isSidebarActive = false;
  sidebarNav.classList.remove('active');
});

// 监听窗口尺寸变化，用防抖优化性能
window.addEventListener('resize', debounce(updateNavigationState));

// 页面加载时初始化导航状态，确保初始显示正确
window.addEventListener('load', updateNavigationState);

关键修复要点 #

1. 防抖函数：解决resize事件连续触发导致的逻辑重复执行问题，让判断逻辑只在窗口尺寸稳定后执行
2. 状态缓存：用isSidebarActive记录当前侧边栏状态，避免重复添加/移除类名导致的失效问题
3. 统一逻辑入口：所有导航状态的变化都通过updateNavigationState函数处理，确保窗口尺寸变化和按钮操作的逻辑一致
4. 初始化执行：页面加载时主动执行一次状态更新，避免初始状态不符合当前窗口尺寸
5. 临界值明确：把切换的窗口临界值定义为常量BREAKPOINT，方便后续调整修改

这样修改后，不管是窗口尺寸变化还是手动点击按钮，导航栏的切换逻辑都会稳定工作啦！

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