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

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

本文介绍一种无需 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 规则不变。

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

  /

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

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

  今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

  您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

  继续访问