响应式复选框菜单求助：默认状态设置与功能实现问题

Hey Paul，我看了你的代码和需求，发现几个小问题导致默认状态没生效，咱们一步步来修复它～

原代码里的几个核心问题 #

• 当屏幕宽度小于930px时，你写了checkbox.checked;但这只是读取复选框的状态，并没有把它设置为true，所以默认勾选不生效
• 没有处理大屏（≥930px）的初始状态：比如默认显示菜单、复选框不勾选
• 页面加载时没有根据屏幕宽度直接设置菜单的显示状态，只有触发复选框change事件才会修改
• 没监听窗口尺寸变化，用户缩放屏幕时状态不会自动同步

修复后的完整实现 #

HTML（补充了菜单容器testHide的示例结构）

<div class="switchContainer">
  <input type="checkbox" class="headerSwitch" name="menuOn">
  <p id="altMenu" class="altMenu">Menu</p>
</div>
<!-- 你的主菜单容器 -->
<div id="testHide" class="mainMenu">
  <ul>
    <li>首页</li>
    <li>产品</li>
    <li>联系我们</li>
  </ul>
</div>

CSS（基础样式，配合JS实现初始显示逻辑）

/* 大屏下默认显示主菜单，隐藏替代菜单 */
@media (min-width: 930px) {
  #testHide {
    display: unset;
  }
  #altMenu {
    display: none;
  }
}

/* 小屏下默认隐藏主菜单，显示替代菜单 */
@media (max-width: 899px) {
  #testHide {
    display: none;
  }
  #altMenu {
    display: unset;
  }
}

/* 可选：给复选框加样式，提升点击体验 */
.headerSwitch {
  width: 22px;
  height: 22px;
  cursor: pointer;
}

JavaScript（核心逻辑，处理初始状态和动态变化）

// 获取DOM元素
const checkbox = document.querySelector('input[name=menuOn]');
const mainMenu = document.getElementById('testHide');
const altMenu = document.getElementById('altMenu');

// 封装状态处理函数，初始化和窗口缩放时复用
function handleMenuState() {
  const screenWidth = window.innerWidth;
  
  if (screenWidth < 930) {
    // 小屏：默认勾选复选框
    checkbox.checked = true;
    // 同步菜单显示状态
    mainMenu.style.display = checkbox.checked ? 'none' : 'unset';
    altMenu.style.display = checkbox.checked ? 'unset' : 'none';
  } else {
    // 大屏：默认不勾选复选框，强制显示主菜单
    checkbox.checked = false;
    mainMenu.style.display = 'unset';
    altMenu.style.display = 'none';
  }
}

// 页面加载时立即执行，设置初始状态
handleMenuState();

// 监听复选框切换事件
checkbox.addEventListener('change', function() {
  // 仅小屏下处理切换逻辑，大屏保持固定状态
  if (window.innerWidth < 930) {
    mainMenu.style.display = this.checked ? 'none' : 'unset';
    altMenu.style.display = this.checked ? 'unset' : 'none';
  }
});

// 监听窗口尺寸变化，自动更新状态
window.addEventListener('resize', handleMenuState);

关键说明 #

1. 封装复用逻辑：把菜单状态的判断放到独立函数里，避免初始化和缩放时重复写代码
2. 初始状态优先：页面加载时直接执行状态函数，确保打开页面就符合对应屏幕的显示要求
3. 响应式适配：监听窗口resize事件，用户缩放屏幕时自动同步菜单和复选框状态
4. 大屏逻辑隔离：大屏下强制锁定主菜单显示、替代菜单隐藏，即使误点复选框也不会影响体验

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