探索“与“：原生实现手风琴/展开收起组件的语义化 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

`<details>`与`<summary>`：原生实现手风琴/展开收起组件的语义化

大家好，今天我们来深入探讨HTML5中两个非常实用的标签：<details>和<summary>。这两个标签提供了一种原生、语义化的方式来实现手风琴（Accordion）或展开/收起（Expand/Collapse）组件，无需编写大量的JavaScript代码，也避免了使用非语义化的<div>和<span>等标签模拟这些组件带来的可访问性问题。

1. <details>和<summary>的基本用法

<details>标签定义了一个用户可以展开或收起的组件。它通常包含一个<summary>标签，作为组件的标题或摘要，点击<summary>标签可以切换组件的展开或收起状态。

基本结构如下：

<details>
  <summary>标题/摘要</summary>
  这里是详细内容，默认情况下会被隐藏，点击标题/摘要后会展开显示。
</details>

示例：

<details>
  <summary>什么是HTML？</summary>
  <p>HTML (HyperText Markup Language) 是一种用于创建网页的标准标记语言。</p>
</details>

在这个例子中，“什么是HTML？”是<summary>的内容，也是用户看到的标题。<p>标签中的内容默认隐藏，点击“什么是HTML？”后，内容会展开显示。

2. <details>标签的属性

<details>标签只有一个布尔属性：open。

open: 如果存在这个属性，<details>组件在初始状态下是展开的。如果省略这个属性，组件默认是收起的。

示例：

<details open>
  <summary>HTML的优点</summary>
  <ul>
    <li>易于学习和使用</li>
    <li>跨平台兼容性</li>
    <li>广泛的浏览器支持</li>
  </ul>
</details>

这个例子中，由于使用了open属性，"HTML的优点"组件在页面加载时默认是展开的。

3. <summary>标签的注意事项

<summary>标签必须是<details>标签的第一个子元素。
<summary>标签的内容可以是任何HTML内联元素，但不能包含交互式内容，例如<a>、<button>或<input>。如果在<summary>中需要链接或按钮，应该使用JavaScript来模拟交互行为，或者将链接/按钮放在<details>标签的其他位置。

4. 使用CSS自定义样式

<details>和<summary>标签可以像其他HTML元素一样使用CSS进行样式定制。

示例：

<style>
  details {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  summary {
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
  }

  details[open] summary {
    background-color: #e0e0e0;
  }

  details > *:not(summary) {
    padding: 10px;
  }
</style>

<details>
  <summary>CSS样式定制</summary>
  <p>这是一个使用CSS定制样式的示例。</p>
</details>

在这个例子中，我们定义了<details>和<summary>标签的边框、内边距、背景色和鼠标指针样式。details[open] summary选择器用于在<details>组件展开时改变<summary>的背景色。details > *:not(summary)选择器为<details>中除了<summary>之外的所有子元素添加内边距。

5. 实现手风琴效果

要实现手风琴效果，我们需要确保一次只有一个<details>组件处于展开状态。这可以通过JavaScript来实现，但也可以通过CSS来实现一些简单的效果。

JavaScript实现：

<style>
  .accordion-container details {
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .accordion-container summary {
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
  }

  .accordion-container details[open] summary {
    background-color: #e0e0e0;
  }

  .accordion-container details > *:not(summary) {
    padding: 10px;
  }
</style>

<div class="accordion-container">
  <details>
    <summary>第一个面板</summary>
    <p>这是第一个面板的内容。</p>
  </details>
  <details>
    <summary>第二个面板</summary>
    <p>这是第二个面板的内容。</p>
  </details>
  <details>
    <summary>第三个面板</summary>
    <p>这是第三个面板的内容。</p>
  </details>
</div>

<script>
  const accordionContainer = document.querySelector('.accordion-container');
  const detailsElements = accordionContainer.querySelectorAll('details');

  detailsElements.forEach(details => {
    details.addEventListener('toggle', () => {
      if (details.open) {
        detailsElements.forEach(otherDetails => {
          if (otherDetails !== details && otherDetails.open) {
            otherDetails.removeAttribute('open');
          }
        });
      }
    });
  });
</script>

在这个例子中，我们首先获取了所有<details>元素，然后为每个<details>元素添加了一个toggle事件监听器。当一个<details>元素展开时，我们遍历所有其他的<details>元素，如果它们是展开的，就移除它们的open属性，从而实现手风琴效果。

6. 可访问性考虑

<details>和<summary>标签本身就提供了良好的可访问性。它们具有正确的语义，屏幕阅读器可以识别它们并正确地朗读它们的内容和状态。

键盘导航: 用户可以使用Tab键在<summary>标签之间导航，使用Enter键或空格键展开或收起<details>组件。
屏幕阅读器支持: 屏幕阅读器可以识别<details>和<summary>标签，并告知用户组件的标题和展开/收起状态。
ARIA属性: 虽然<details>和<summary>标签本身就具有良好的可访问性，但仍然可以使用ARIA属性来进一步增强它们的可访问性。例如，可以使用aria-label属性为<summary>标签提供更详细的描述，或者使用aria-expanded属性来显式地指示<details>组件的展开/收起状态。但是通常情况下不需要，因为<details>标签本身会根据open属性自动更新aria-expanded属性。

7. 浏览器兼容性

<details>和<summary>标签在现代浏览器中得到了广泛的支持。但是，在一些旧版本的浏览器中可能不支持这些标签。

浏览器	支持情况
Chrome	支持
Firefox	支持
Safari	支持
Edge	支持
Internet Explorer	不支持

对于不支持<details>和<summary>标签的浏览器，可以使用polyfill来提供兼容性。一个常用的polyfill是<details>元素polyfill。

8. 使用polyfill提供兼容性

为了在旧版本浏览器中使用<details>和<summary>标签，可以使用polyfill。以下是一个使用<details>元素polyfill的示例：

引入polyfill脚本: 在HTML文档的<head>标签中引入polyfill脚本。

<head>
  <meta charset="UTF-8">
  <title>Details/Summary Polyfill Example</title>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/details-element-polyfill.min.js"></script>
</head>

这个例子使用了jsDelivr CDN来引入polyfill脚本。你可以将details-element-polyfill.min.js文件下载到本地，然后使用本地文件路径来引入polyfill脚本。

使用<details>和<summary>标签: 在HTML文档中使用<details>和<summary>标签。

<body>
  <details>
    <summary>什么是polyfill？</summary>
    <p>Polyfill 是一种代码，用于在旧版本的浏览器中提供现代浏览器才支持的功能。</p>
  </details>
</body>

9. 高级用法示例：动画效果

我们可以使用CSS Transitions或Animations为<details>组件添加展开/收起的动画效果。

示例：使用CSS Transitions实现高度动画

<style>
  details {
    border: 1px solid #ccc;
    margin-bottom: 10px;
    overflow: hidden; /* 隐藏超出容器的内容 */
  }

  summary {
    padding: 10px;
    background-color: #f0f0f0;
    cursor: pointer;
  }

  details[open] summary {
    background-color: #e0e0e0;
  }

  details > *:not(summary) {
    padding: 10px;
    transition: max-height 0.3s ease-in-out; /* 添加过渡效果 */
    max-height: 0; /* 初始高度为0 */
  }

  details[open] > *:not(summary) {
    max-height: 500px; /* 展开后的最大高度 */
  }
</style>

<details>
  <summary>动画效果</summary>
  <p>这是一个使用CSS Transitions实现高度动画的示例。</p>
  <p>内容会以动画的方式展开和收起。</p>
</details>

在这个例子中，我们首先设置了<details>容器的overflow: hidden属性，以隐藏超出容器的内容。然后，我们为<details>中除了<summary>之外的所有子元素添加了transition: max-height 0.3s ease-in-out属性，定义了高度变化的过渡效果。初始时，我们将这些元素的最大高度设置为0，当<details>组件展开时，我们将这些元素的最大高度设置为一个较大的值（例如500px），从而实现高度动画效果。

10. 与其他HTML元素结合使用

<details>和<summary>标签可以与其他HTML元素结合使用，创建更复杂的用户界面。

示例：使用表格和列表

<details>
  <summary>表格示例</summary>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>职业</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>30</td>
        <td>工程师</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25</td>
        <td>设计师</td>
      </tr>
    </tbody>
  </table>
</details>

<details>
  <summary>列表示例</summary>
  <ul>
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>
</details>

在这个例子中，我们将表格和列表放在<details>组件中，用户可以展开或收起这些内容。

11. <details>和<summary>的适用场景

FAQ（常见问题解答）: 使用<details>和<summary>标签可以方便地创建FAQ页面，用户可以展开或收起问题的答案。
文档大纲: 使用<details>和<summary>标签可以创建文档大纲，用户可以展开或收起章节内容。
产品信息: 使用<details>和<summary>标签可以显示产品的详细信息，用户可以展开或收起信息。
设置面板: 可以将设置选项放在<details>标签中，用户可以选择性地展开设置选项。

12. 避免滥用<details>和<summary>

虽然<details>和<summary>标签非常实用，但是也应该避免滥用它们。

不要用于重要内容: 重要内容应该始终可见，不应该隐藏在<details>组件中。
不要嵌套过深的<details>组件: 嵌套过深的<details>组件会使页面结构复杂，难以理解和维护。
不要仅仅为了美观而使用<details>组件: 应该根据内容的语义来决定是否使用<details>组件。

原生标签的优势

使用<details>和<summary>原生标签实现手风琴/展开收起组件有很多优点：

语义化: 这些标签具有明确的语义，可以提高页面的可访问性和SEO。
原生支持: 无需编写大量的JavaScript代码，减少了代码量和维护成本。
可访问性: 这些标签具有良好的可访问性，屏幕阅读器可以正确地识别它们并朗读它们的内容和状态。
浏览器兼容性: 在现代浏览器中得到了广泛的支持，可以使用polyfill来提供兼容性。

总结

<details>和<summary>标签是HTML5中非常有用的两个标签，它们提供了一种原生、语义化的方式来实现手风琴或展开/收起组件。它们具有良好的可访问性、浏览器兼容性和可定制性，可以方便地用于创建各种用户界面。

用原生标签构建组件的趋势

原生HTML标签在构建Web组件中的作用越来越重要，<details>和<summary>就是一个很好的例子。利用这些原生标签，我们可以减少对JavaScript的依赖，提高代码的可维护性和可访问性。

继续探索HTML的潜力

HTML的功能远不止我们今天所讨论的这些。持续探索和利用新的HTML特性，可以帮助我们构建更现代、更高效、更易于访问的Web应用。

<details>与<summary>：原生实现手风琴/展开收起组件的语义化

发表回复 取消回复

`<details>`与`<summary>`：原生实现手风琴/展开收起组件的语义化

发表回复取消回复