如何用纯 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：

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

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

✅ 最终效果与优势

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

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

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

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