要创建可折叠的FAQ列表,您可以使用HTML5中的<details>
和<summary>
元素。
下面是一个基本的示例代码,其中包含两个FAQ条目:
<details>
<summary>问题1:这是什么?</summary>
<p>这是一个示例答案。</p>
</details>
<details>
<summary>问题2:这是另一个问题吗?</summary>
<p>是的,这是另一个示例答案。</p>
</details>
在这个例子中,<details>
标签包含一个可折叠的内容块,<summary>
标签包含一个可单击的标题,以展开或折叠<details>
元素。<p>
标签包含实际的答案文本。
用户可以单击标题来展开或折叠答案文本。如果答案文本很长,也可以在<details>
标记内创建多个段落、列表或其他HTML元素。
请注意,<details>
和<summary>
元素在一些旧的浏览器(如IE11及更早版本)中可能不被支持。因此,为了确保最佳的浏览器兼容性,您应该使用CSS来为不支持<details>
元素的浏览器提供后备样式。