本文介绍一种无需 javascript 的纯 css 方案，通过 `
要构建一个专业、轻量且可维护的字母索引侧边栏（如 A/B/C 分组游戏列表），关键在于：内容默认不可见，仅在用户主动交互（点击字母）时才展开对应子列表。传统 JS 方案虽可行，但引入了额外复杂度和潜在兼容性问题；而现代 CSS 提供了一种更优雅、声明式、零脚本的解决方案。
✅ 核心思路：用语义化标签 + CSS 逻辑控制显隐
我们利用 HTML <label> 元素的天然点击透传特性（点击 label 可触发其关联 <input> 的状态切换），配合 CSS 的 :has() 选择器（支持父元素根据子元素状态匹配），实现“点击字母 → 显示紧邻的 <ul>”的效果。
? 步骤一：重构 HTML 结构
将每个字母包裹为 <label>，内部嵌入一个 type="checkbox"（用于状态管理），并确保待展开的 <ul> 紧跟在 <label> 所在 <li> 的同级后方（即 label + ul 关系）：
<ul class="alphabet-sidebar">
<li>
<label>
A
<input type="checkbox" />
</label>
</li>
<li>
<label>
B
<input type="checkbox" />
</label>
<ul>
<li>Baldur's Gate</li>
<li>Baldur's Gate II: Shadows of Amn</li>
<!-- 更多 B 开头条目 -->
</ul>
</li>
<li>
<label>
C
<input type="checkbox" />
</label>
<ul>
<li>Cities Skylines (Livestream)</li>
</ul>
</li>
</ul>? 注意：<ul> 必须是 <label> 同级兄弟（而非子元素），否则 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 操作，性能极致轻量；
- ✅ 语义清晰：<label> 表达“可交互标题”，<input> 表达“开关状态”，符合无障碍标准（屏幕阅读器可识别）；
- ✅ 样式解耦：显隐逻辑由 CSS 控制，UI 样式（缩进、颜色、动画）完全可定制；
- ✅ 自动收起其他项：若需“单选折叠”（即展开一个时关闭其他），只需改用单个 <input type="radio"> 并共享 name 属性，CSS 规则不变。
? 小技巧：为提升可访问性，可在 <label> 中添加 aria-expanded 属性（需 JS 同步），或直接使用 <details>/<summary>（但语义上更适合 FAQ，非字母索引场景）。
至此，你已拥有一套简洁、现代、可扩展的字母分组下拉菜单方案——无需框架，不写一行运行时 JS，仅靠 HTML 结构 + 精准 CSS 即可交付专业级交互体验。
