如何实现桌面端展开移动端收起的响应式侧边栏下拉菜单

你用的这套基于checkbox控制展开收起的代码逻辑非常轻量，要实现桌面端默认展开、移动端默认收起的需求，有两种最优方案可选，都不需要大幅改动现有代码：

方案1：纯CSS实现（现代浏览器兼容） #

不需要修改HTML和加JS代码，直接新增媒体查询样式即可，兼容Chrome、Firefox、Safari 15.4+等绝大多数主流现代浏览器：

/* 可自行调整断点数值，这里用常规的768px作为移动端和桌面端的分界 */
/* 桌面端样式：默认展开所有菜单 */
@media (min-width: 768px) {
  /* 默认显示所有内容，隐藏加号、显示减号 */
  .expand-list .content {
    max-height: 1000px !important;
    opacity: 1 !important;
    overflow: visible;
  }
  .expand-list .fa-plus { display: none; }
  .expand-list .fa-minus { display: inline-block; }

  /* 保留点击切换逻辑：未选中的checkbox对应内容隐藏 */
  .expand-list li:has(input.tab:not(:checked)) .content {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
  }
  .expand-list li:has(input.tab:not(:checked)) .fa-plus { display: inline-block; }
  .expand-list li:has(input.tab:not(:checked)) .fa-minus { display: none; }
}

/* 移动端样式：默认收起所有菜单 */
@media (max-width: 767px) {
  /* 默认隐藏所有内容，显示加号、隐藏减号 */
  .expand-list .content {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden;
  }
  .expand-list .fa-plus { display: inline-block; }
  .expand-list .fa-minus { display: none; }

  /* 保留点击切换逻辑：选中的checkbox对应内容展开 */
  .expand-list li:has(input.tab:checked) .content {
    max-height: 1000px !important;
    opacity: 1 !important;
    overflow: visible;
  }
  .expand-list li:has(input.tab:checked) .fa-plus { display: none; }
  .expand-list li:has(input.tab:checked) .fa-minus { display: inline-block; }
}

注：代码中max-height的数值可以调整为大于你最长菜单内容的高度，避免内容被截断。

方案2：轻量JS实现（全浏览器兼容） #

如果需要兼容IE、老版本Safari等旧浏览器，可以加不到10行JS代码实现，不需要改现有CSS样式：

window.addEventListener('DOMContentLoaded', () => {
  const menuTabs = document.querySelectorAll('.expand-list input.tab');
  // 768px为断点，可自行调整
  const isDesktop = window.innerWidth >= 768;
  // 初始化菜单状态
  menuTabs.forEach(tab => tab.checked = isDesktop);

  // 可选：窗口尺寸变化时重置菜单状态，不需要可以删除这段
  window.addEventListener('resize', () => {
    const currentIsDesktop = window.innerWidth >= 768;
    menuTabs.forEach(tab => tab.checked = currentIsDesktop);
  });
});

注：如果需要保留用户手动切换后的菜单状态，在resize逻辑里加判断条件即可。

两种方案都可以直接适配你现有代码，方案1无运行时开销，方案2兼容性更好，可根据实际业务场景选择。

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