揭秘：细节标签开启手风琴新时代

2023-08-10 19:24:34

手风琴模式：使用 details 标签升级交互

手风琴模式 是一种交互式元素，允许用户点击或展开部分，以查看更多详细信息。传统的实现方法涉及复杂的 JavaScript 和 CSS，但 HTML 中的 details 标签的出现彻底改变了这一切。让我们深入了解 details 标签，了解它如何简化手风琴模式的创建并提升您的交互式设计。

details 标签的强大功能

details 标签具有一个关键属性：name 。name 属性允许您定义标题，当用户点击它时，它将触发手风琴效果。通过设置此属性，您可以在不借助任何外部脚本来控制元素的开关。

代码示例：

<details>
  <summary>关于我们</summary>
  <p>我们是一家致力于提供优质产品和服务的公司...</p>
</details>

在上面的示例中，点击“关于我们”标题将展开或关闭该部分。

风格化您的手风琴

为了进一步美化您的手风琴，您可以使用 CSS 来定制其外观。以下示例展示了如何使用 CSS：

details {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 10px;
}

summary {
  cursor: pointer;
  font-weight: bold;
}

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

details[open] p {
  display: block;
}

代码示例：

将以下代码粘贴到 <head> 部分中：

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

summary {
  cursor: pointer;
  font-weight: bold;
}

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

details[open] p {
  display: block;
}
</style>