CSS 独占式手风琴：单项展开控制指南

手风琴（Accordion）是一种常见的 UI 模式，用于渐进式地展示内容。它们能让您以紧凑、有组织的方式呈现信息，从而改善用户体验，尤其是在移动设备上。在本指南中，我们将探讨如何创建一个纯 CSS 的独占式手风琴，也称为单项展开手风琴。这种手风琴确保在任何时候只有一个部分是打开的，为您的用户提供一个干净、专注的浏览体验。

为何使用独占式手风琴？

虽然标准手风琴允许多个部分同时打开，但独占式手风琴有几个优点：

• 提升焦点：通过限制用户一次只能打开一个部分，您可以引导他们的注意力，减少认知负荷。
• 增强导航性：独占式手风琴简化了导航，尤其是在复杂的内容结构中。用户始终清楚自己身在何处以及正在显示什么内容。
• 移动设备友好：在较小的屏幕上，独占式手风琴有助于节省宝贵的屏幕空间，并提供更好的用户体验。
• 更清晰的层次结构：单项展开机制强化了内容的层级结构，使其更易于理解。

纯 CSS 实现方法

虽然 JavaScript 可用于创建手风琴，但纯 CSS 的方法有几个优点：

• 无 JavaScript 依赖：无需使用 JavaScript，减少了页面加载时间及潜在的兼容性问题。
• 无障碍性：如果实现得当，纯 CSS 手风琴对于残障用户可能更具可访问性。
• 简单性：对于基本的手风琴功能，纯 CSS 的方法可能更易于实现和维护。

构建独占式手风琴：分步指南

让我们来分解创建纯 CSS 独占式手风琴的过程。我们将涵盖 HTML 结构、CSS 样式以及单项展开机制背后的逻辑。

1. HTML 结构

我们手风琴的基础是 HTML 结构。我们将结合使用 <input type="radio"> 元素、<label> 元素和 <div> 元素来创建手风琴的各个部分。

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked>
  <label for="section1">第一部分</label>
  <div class="content">
    <p>第一部分的内容。</p>
  </div>

  <input type="radio" name="accordion" id="section2">
  <label for="section2">第二部分</label>
  <div class="content">
    <p>第二部分的内容。</p>
  </div>

  <input type="radio" name="accordion" id="section3">
  <label for="section3">第三部分</label>
  <div class="content">
    <p>第三部分的内容。</p>
  </div>
</div>

解释：

• <div class="accordion">：这是整个手风琴的主容器。
• <input type="radio" name="accordion" id="section1" checked>：每个部分都以一个单选按钮开始。name="accordion" 属性至关重要；它将所有单选按钮组合在一起，确保一次只能选择一个。id 属性用于将单选按钮与其对应的标签链接起来。第一个单选按钮上的 checked 属性使其成为默认打开的部分。
• <label for="section1">第一部分</label>：标签作为每个部分的可点击标题。for 属性必须与相应单选按钮的 id 相匹配。
• <div class="content">：这包含了每个部分的实际内容。最初，这些内容将被隐藏。

2. CSS 样式

现在，让我们用 CSS 来为手风琴设置样式。我们将专注于隐藏单选按钮、为标签设置样式，并根据单选按钮的状态控制内容的可见性。

.accordion {
  width: 100%;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

.accordion input[type="radio"] {
  display: none;
}

.accordion label {
  display: block;
  padding: 10px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  font-weight: bold;
}

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
}

.accordion input[type="radio"]:checked + label {
  background-color: #ddd;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
}

解释：

• .accordion input[type="radio"] { display: none; }：这将单选按钮从视图中隐藏。它们仍然具有功能，但用户看不到。
• .accordion label { ... }：这为标签设置样式，使它们看起来像可点击的标题。我们将 cursor 设置为 pointer，以表明它们是可交互的。
• .accordion .content { ... display: none; }：最初，我们使用 display: none; 隐藏每个部分的内容。
• .accordion input[type="radio"]:checked + label { ... }：这为当前选中（checked）的单选按钮的标签设置样式。我们改变背景颜色以表明它是活动的。+（相邻兄弟选择器）会选择紧跟在选中的单选按钮后面的标签。
• .accordion input[type="radio"]:checked + label + .content { ... display: block; }：这将显示当前选中部分的内容。我们再次使用两次相邻兄弟选择器（+）来选择紧跟在标签之后的 .content div，而该标签又紧跟在选中的单选按钮之后。这是纯 CSS 手风琴逻辑的关键。

3. 无障碍性注意事项

无障碍性对于任何 Web 组件都至关重要。以下是使您的纯 CSS 手风琴具有可访问性的一些注意事项：

• 键盘导航：确保用户可以使用键盘导航手风琴。单选按钮本身是可以通过键盘聚焦的，但您可能需要为标签在聚焦时添加视觉提示（例如，焦点轮廓）。
• ARIA 属性：使用 ARIA 属性为屏幕阅读器提供额外的语义信息。例如，您可以使用 aria-expanded 来指示一个部分是打开还是关闭，使用 aria-controls 将标签链接到相应的内容部分。
• 语义化 HTML：在适当的地方使用语义化的 HTML 元素。例如，考虑使用 <h2> 或 <h3> 元素作为部分标题，而不仅仅是为标签设置样式。
• 对比度：确保文本和背景之间有足够的颜色对比度，以保证可读性。

以下是如何将 ARIA 属性添加到我们的 HTML 结构中的示例：

<div class="accordion">
  <input type="radio" name="accordion" id="section1" checked aria-controls="content1">
  <label for="section1" aria-expanded="true">第一部分</label>
  <div class="content" id="content1" aria-hidden="false">
    <p>第一部分的内容。</p>
  </div>

  <input type="radio" name="accordion" id="section2" aria-controls="content2">
  <label for="section2" aria-expanded="false">第二部分</label>
  <div class="content" id="content2" aria-hidden="true">
    <p>第二部分的内容。</p>
  </div>

  <input type="radio" name="accordion" id="section3" aria-controls="content3">
  <label for="section3" aria-expanded="false">第三部分</label>
  <div class="content" id="content3" aria-hidden="true">
    <p>第三部分的内容。</p>
  </div>
</div>

以及相应的 CSS 来更新 aria-expanded 和 aria-hidden：

.accordion [aria-expanded="true"] {
 background-color: #ddd;
}

.accordion [aria-hidden="false"] {
 display: block;
}

.accordion [aria-hidden="true"] {
 display: none;
}

4. 高级定制

可以根据您的特定设计要求，以多种方式定制基本的手风琴结构：

• 动画：添加 CSS 过渡或动画，使内容部分平滑地打开和关闭。例如，您可以使用 transition 属性为内容的 height 或 opacity 添加动画效果。
• 图标：在标签中包含图标，以直观地指示每个部分的打开/关闭状态。您可以使用 CSS 伪元素（::before 或 ::after）来添加图标。
• 主题化：自定义颜色、字体和间距，以匹配您网站的整体设计。

以下是为内容高度添加简单过渡的示例：

.accordion .content {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  display: none;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

.accordion input[type="radio"]:checked + label + .content {
  display: block;
  height: auto; /* 重要：允许内容扩展到其自然高度 */
}

5. 全球应用范例与改编

纯 CSS 独占式手风琴是一种通用的模式，可以适应不同文化和地区的各种情境。以下是一些示例：

• 电商产品页面：以有组织的方式呈现产品详情，如规格、评论和配送信息。这在全球范围内都适用，因为无论身在何处，产品信息对于在线购物都至关重要。
• 常见问题解答（FAQ）区域：显示常见问题和答案。这是全球网站的常见用例，帮助用户快速找到信息并减少支持请求。
• 文档和教程：将复杂的文档或教程内容组织成易于管理的部分。这对于软件公司、教育机构以及任何提供全球在线学习资源的组织都很有益。
• 移动导航：使用独占式手风琴创建适合移动设备的导航菜单，特别是对于菜单项众多的网站。这对于通过智能手机和平板电脑访问网站的用户至关重要，确保了无缝体验。
• 表单：使用手风琴结构将长表单分解为更小、更易于管理的步骤。这可以提高用户完成率并减少表单放弃率。考虑将标签翻译成当地语言以获得最佳用户体验。

6. 常见陷阱与解决方案

虽然纯 CSS 的方法很有效，但仍有一些潜在的陷阱需要注意：

• CSS 特异性：确保您的 CSS 规则具有足够的特异性来覆盖任何冲突的样式。谨慎使用更具体的选择器或 !important 关键字。
• 无障碍性问题：忽视无障碍性考虑会为残障用户造成障碍。始终使用屏幕阅读器和键盘导航测试您的手风琴。
• 复杂内容：对于手风琴部分内非常复杂的内容，基于 JavaScript 的解决方案可能会提供更大的灵活性和控制力。
• 浏览器兼容性：在不同浏览器中测试您的手风琴以确保行为一致。虽然大多数现代浏览器都支持此方法中使用的 CSS 选择器，但旧版浏览器可能需要 polyfill 或替代解决方案。

7. 纯 CSS 手风琴的替代方案

虽然本文专注于纯 CSS 手风琴，但还有其他选择：

• JavaScript 手风琴：在手风琴的行为上提供更大的灵活性和控制力。JavaScript 可用于添加动画、处理复杂内容和改善无障碍性。像 jQuery UI 这样的库以及 React 和 Vue.js 等框架都提供了现成的手风琴组件。
• HTML <details> 与 <summary> 元素：这些原生的 HTML 元素提供了基本的手风琴功能，无需任何 JavaScript。然而，它们缺乏独占式展开行为，并且需要 CSS 样式来进行定制。

结论

创建一个纯 CSS 的独占式手风琴是提升用户体验的好方法，尤其是在移动设备上。通过利用 CSS 选择器和单选按钮的强大功能，您可以创建一个简单、易于访问且高效的手风琴，而无需依赖 JavaScript。请记住考虑无障碍性，在不同浏览器中进行测试，并根据您的特定设计要求调整代码。通过遵循本指南中概述的步骤，您可以创建一个专业且用户友好的手风琴，它能改善网站导航，并帮助用户快速轻松地找到所需信息。此方法提供的单项展开机制带来了更整洁、更专注的用户体验。

这项技术适用于各种国际环境，无论用户的位置或语言如何，都能提供一致的用户体验。通过将内容和设计调整以适应当地偏好，您可以创建一个能与全球用户产生共鸣的手风琴。

更多资源

• MDN Web Docs: <input type="radio">
• MDN Web Docs: 相邻兄弟组合器 (+)
• WAI-ARIA 创作实践：手风琴