如何使用 HTML 创建可以扩展但永不收缩的摘要元素？

在 HTML 中，我们可以使用 <details> 和 <summary> 元素来创建可扩展的摘要元素。该元素在默认情况下是收缩的，当用户点击摘要元素时，它会展开显示。这个特性非常适合一些需要隐藏部分信息但又希望用户可以自己选择是否查看的情况。

HTML 代码

下面是一个简单的 HTML 代码示例，展示了如何使用<details>和<summary>创建可扩展的摘要元素。

<details>
  <summary>点击这里查看更多</summary>
  <p>这里是需要在默认情况下不显示的内容。</p>
</details>

这段代码将创建一个摘要元素，摘要元素在默认情况下只显示摘要部分，当用户点击<summary>元素时，被隐藏的<p>元素将会展开显示。

额外的选项

open 属性

如果你希望在默认情况下就展开摘要元素，你可以在<details>元素中添加open属性。例如：

<details open>
  <summary>这个摘要元素默认就是展开的。</summary>
  <p>这里是需要在默认情况下显示的内容。</p>
</details>

多个摘要元素

如果你想要创建多个摘要元素，你可以直接复制上面的代码块，并将摘要元素的内容替换成自己的。

<details>
  <summary>点击这里查看更多</summary>
  <p>这里是需要在默认情况下不显示的内容。</p>
</details>

<details open>
  <summary>这个摘要元素默认就是展开的。</summary>
  <p>这里是需要在默认情况下显示的内容。</p>
</details>

总结

使用 HTML 中的<details>和<summary>元素，可以轻松地创建可扩展但永不收缩的摘要元素。该元素非常适用于需要隐藏部分信息但又希望用户可以自行选择是否查看的场景。