如何用纯 CSS 实现点击字母展开对应游戏列表的侧边栏下拉菜单

本文介绍一种无需 javascript 的纯 css 方案，通过 `` + 隐藏复选框 + `:has()` 伪类实现字母索引侧边栏的按需展开功能，确保所有子项默认隐藏，仅在点击对应字母时显示。

要构建一个专业、轻量且可维护的字母索引侧边栏（如 A/B/C 分组游戏列表），关键在于：内容默认不可见，仅在用户主动交互（点击字母）时才展开对应子列表。传统 JS 方案虽可行，但引入了额外复杂度和潜在兼容性问题；而现代 CSS 提供了一种更优雅、声明式、零脚本的解决方案。

✅ 核心思路：用语义化标签 + CSS 逻辑控制显隐

我们利用 HTML 元素的天然点击透传特性（点击 label 可触发其关联 的状态切换），配合 CSS 的 :has() 选择器（支持父元素根据子元素状态匹配），实现“点击字母 → 显示紧邻的

”的效果。

? 步骤一：重构 HTML 结构

将每个字母包裹为 ，内部嵌入一个 type="checkbox"（用于状态管理），并确保待展开的

紧跟在 所在
• 的同级后方（即 label + ul 关系）：

  

    
      A
      
    
  
  

    
      B
      
    
    

      
Baldur's Gate
      
Baldur's Gate II: Shadows of Amn
      
    
  
  

    
      C
      
    
    

      
Cities Skylines (Livestream)
    
  

? 注意： 必须是 同级兄弟（而非子元素），否则 label + ul 选择器不生效。

? 步骤二：编写核心 CSS 规则

/* 1. 隐藏所有复选框（仅作状态载体） */
input[type="checkbox"] {
  display: none;
}

/* 2. 默认隐藏所有子列表（关键！） */
li > ul {
  display: none;
  margin-top: 4px;
  padding-left: 20px;
}

/* 3. 【魔法所在】当 label 内 checkbox 被勾选时，显示其后紧邻的 ul */
label:has(input[type="checkbox"]:checked) + ul {
  display: block;
}

/* ✨ 增强体验：让 label 可点击、有反馈 */
label {
  display: block;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  border-radius: 4px;
  transition: background-color 0.2s;
}

label:hover {
  background-color: #f5f5f5;
}

label:has(input[type="checkbox"]:checked) {
  background-color: #e3f2fd;
  font-weight: 600;
}

⚠️ 兼容性说明与备选方案

• :has() 已被 Chrome 105+、Firefox 121+、Safari 15.4+ 原生支持（CanIUse 数据），覆盖当前主流浏览器。
• 若需支持旧版浏览器（如 IE 或早期 Edge），可回退至 JavaScript 方案（推荐使用 classList.toggle() 替代内联 style.display，更健壮）：

  document.querySelectorAll('label').forEach(label => {
    label.addEventListener('click', () => {
      const nextUl = label.parentElement.nextElementSibling;
      if (nextUl && nextUl.tagName === 'UL') {
        nextUl.classList.toggle('expanded');
      }
    });
  });

  并添加 CSS：

  立即学习“前端免费学习笔记（深入）”；

  

  灵光

  蚂蚁集团推出的全模态AI助手

  下载

  li > ul:not(.expanded) { display: none; }

✅ 最终效果与优势

• ✅ 零 JS 运行时依赖：无事件监听、无 DOM 操作，性能极致轻量；
• ✅ 语义清晰： 表达“可交互标题”， 表达“开关状态”，符合无障碍标准（屏幕阅读器可识别）；
• ✅ 样式解耦：显隐逻辑由 CSS 控制，UI 样式（缩进、颜色、动画）完全可定制；
• ✅ 自动收起其他项：若需“单选折叠”（即展开一个时关闭其他），只需改用单个 并共享 name 属性，CSS 规则不变。

? 小技巧：为提升可访问性，可在 中添加 aria-expanded 属性（需 JS 同步），或直接使用 ails>/

（但语义上更适合 FAQ，非字母索引场景）。

至此，你已拥有一套简洁、现代、可扩展的字母分组下拉菜单方案——无需框架，不写一行运行时 JS，仅靠 HTML 结构 + 精准 CSS 即可交付专业级交互体验。