如何使用 HTML5 的 details 和 summary 标签创建一个可折叠的内容区域？

推荐答案

<details>
  <summary>点击展开/收起</summary>
  <p>这是可折叠的内容区域，点击 summary 标签可以展开或收起。</p>
</details>

本题详细解读

details 和 summary 标签是 HTML5 中用于创建可折叠内容区域的语义化标签。

• details 标签:
  • 它作为一个容器，包含可折叠的内容以及 summary 标签。
  • 默认状态下，details 标签的内容是折叠的。
  • 当 details 元素的 open 属性存在时，内容会展开，用户可以通过点击 summary 标签来切换展开/折叠状态，或者通过 details 元素的 open 属性来控制。
  • details 标签本身并没有规定折叠内容的样式，可以使用 CSS 来自定义其外观。
• summary 标签:
  • summary 标签必须作为 details 标签的第一个子元素。
  • 它是可点击的，用户通过点击该标签来展开/收起 details 标签的内容。
  • summary 标签中通常放置一个简短的标题或描述，提示用户其点击后会发生什么。
  • 浏览器会自动为 summary 标签添加一个展开/收起图标（通常是一个小箭头）。

使用示例

以下是一个稍微复杂的例子，包含更丰富的内容和 CSS 自定义：

// www.javascriptcn.com code example
<details class="custom-details">
  <summary class="custom-summary">
    <span class="arrow"></span> 了解更多
  </summary>
  <div class="content">
    <h3>HTML5 details 和 summary</h3>
    <p>这个例子展示了如何使用 CSS 自定义 details 和 summary 标签的外观。</p>
    <ul>
        <li>可以使用 CSS 修改 summary 的样式</li>
        <li>details 标签的 open 属性可以控制其初始状态</li>
    </ul>
  </div>
</details>

<style>
.custom-details {
  border: 1px solid #ccc;
  margin: 10px;
  width: 300px;
}

.custom-summary {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
  position: relative; /* For the arrow */
}

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #333;
    margin-right: 5px;
  }

  .custom-details[open] .arrow {
      transform: rotate(180deg);
      border-top: 0;
    border-bottom: 5px solid #333;
  }

.content {
  padding: 10px;
}
</style>

在这个例子中，我们添加了CSS样式来改变 details 和 summary 标签的外观，并且使用了一个伪元素来显示箭头图标，并使用 details[open] 来改变箭头的方向。