当前位置：首页 > 文章列表 > 文章 > 前端 > 纯CSS点击字母展开侧边栏菜单实现

纯CSS点击字母展开侧边栏菜单实现

2026-02-14 11:33:44 0浏览收藏

本文揭秘了一种纯CSS实现的字母索引侧边栏下拉菜单方案——无需JavaScript，仅通过语义化HTML（label + 隐藏复选框）与现代CSS特性（特别是`:has()`伪类）即可完成点击字母即时展开对应游戏子列表的交互效果；该方法默认隐藏所有内容、支持无障碍访问、性能轻量、样式高度可定制，且兼容当前主流浏览器（Chrome 105+、Firefox 121+、Safari 15.4+），是构建专业级分组导航菜单的优雅、简洁、零脚本解决方案。

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

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

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

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

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

? 步骤一：重构 HTML 结构

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

所在

的同级后方（即 label + ul 关系）：

<ul class="alphabet-sidebar">
  <li>
    <label>
      A
      &lt;input type=&quot;checkbox&quot; /&gt;
    </label>
  </li>
  <li>
    <label>
      B
      &lt;input type=&quot;checkbox&quot; /&gt;
    </label>
    <ul>
      <li>Baldur's Gate</li>
      <li>Baldur's Gate II: Shadows of Amn</li>
      <!-- 更多 B 开头条目 -->
    </ul>
  </li>
  <li>
    <label>
      C
      &lt;input type=&quot;checkbox&quot; /&gt;
    </label>
    <ul>
      <li>Cities Skylines (Livestream)</li>
    </ul>
  </li>
</ul>

? 注意：
必须是同级兄弟（而非子元素），否则 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 操作，性能极致轻量；
✅ 语义清晰：表达“可交互标题”，<input> 表达“开关状态”，符合无障碍标准（屏幕阅读器可识别）；
✅ 样式解耦：显隐逻辑由 CSS 控制，UI 样式（缩进、颜色、动画）完全可定制；
✅ 自动收起其他项：若需“单选折叠”（即展开一个时关闭其他），只需改用单个 <input type="radio"> 并共享 name 属性，CSS 规则不变。