仅使用 HTML 创建可折叠部分

内容

简介

细节

示例

概括

内容

1. 简介
2. 细节
3. 示例
4. 概括

简介

我喜欢创建用户界面（UI），并且经常需要一个可以展开和折叠的部分，例如常见问题解答部分。

我曾经使用 NPM 并安装一个库来帮助，直到我发现你可以使用纯 HTML 元素来做到这一点！

它们可能不是名字最明显的：

• 细节
• 概括

它们对浏览器的支持相当出色。

细节

详细信息元素用于包含我们想要显示和隐藏的内容。
摘要元素是描述隐藏内容的标题，在常见问题解答部分中，这可能是问题，而答案隐藏在详细信息元素中，直到展开为止。

如果用例需要，您可以通过设置open属性来使用 JavaScript 打开和关闭详细信息元素。

箭头的样式也非常简单，您可以在下面的示例中看到这一点，我使用了表情符号，但这可以是任何您想要的。

示例

闭嘴，给我看代码。

概括

总而言之，您可以利用浏览器提供的资源来创建一个可展开和折叠的部分。
所有用户都可以访问它，因为它的语义化 HTML 代码。
由于只包含 HTML 和几行 CSS，它的加载速度非常快。
它能够响应任何屏幕尺寸。

祝您搭建愉快！

您还希望在此 Web Dev 系列中看到什么？