菜鸟-创作你的创作

HTML5使用details标签：展开/收缩信息

lichongyang

1 周前

下面给你整理一份 HTML5 <details> 标签的完整使用方法，用于创建可展开/收缩的信息区域，非常适合 FAQ、说明、提示等场景。

1️⃣ 基本语法

&lt;details>
  &lt;summary>点击展开更多信息&lt;/summary>
  &lt;p>这里是详细信息，点击 summary 可以收起或展开。&lt;/p>
&lt;/details>

<details>：整体可展开/收缩的容器
<summary>：默认显示的标题，用户点击它来切换展开状态
<p> 或其他内容：折叠内容，初始状态隐藏

2️⃣ 默认展开

&lt;details open>
  &lt;summary>默认展开信息&lt;/summary>
  &lt;p>内容一开始就显示。&lt;/p>
&lt;/details>

open 属性：默认展开

3️⃣ 样式自定义

&lt;details style="border:1px solid #ccc;padding:10px;border-radius:6px;">
  &lt;summary style="cursor:pointer;font-weight:bold;">点击查看提示&lt;/summary>
  &lt;p style="color:#555;">这里可以写提示信息或者额外说明。&lt;/p>
&lt;/details>

4️⃣ 与 JavaScript 结合

可以监听展开/收缩事件：

&lt;details id="faq1">
  &lt;summary>常见问题 1&lt;/summary>
  &lt;p>这是问题的详细答案。&lt;/p>
&lt;/details>

&lt;script>
const faq = document.getElementById('faq1');
faq.addEventListener('toggle', e => {
    if(faq.open){
        console.log('FAQ 1 展开了');
    } else {
        console.log('FAQ 1 收起了');
    }
});
&lt;/script>

5️⃣ 多个 `<details>` 组合

&lt;details>
  &lt;summary>问题 1&lt;/summary>
  &lt;p>答案 1&lt;/p>
&lt;/details>

&lt;details>
  &lt;summary>问题 2&lt;/summary>
  &lt;p>答案 2&lt;/p>
&lt;/details>

&lt;details>
  &lt;summary>问题 3&lt;/summary>
  &lt;p>答案 3&lt;/p>
&lt;/details>

每个 <details> 独立展开/收缩
可用 CSS 或 JS 实现“手风琴效果”

6️⃣ 示例：FAQ 页面

&lt;h2>常见问题&lt;/h2>
&lt;details>
  &lt;summary>如何注册账户？&lt;/summary>
  &lt;p>点击页面右上角的“注册”，填写信息并提交即可。&lt;/p>
&lt;/details>

&lt;details>
  &lt;summary>忘记密码怎么办？&lt;/summary>
  &lt;p>在登录页面点击“忘记密码”，按提示重置。&lt;/p>
&lt;/details>

&lt;details>
  &lt;summary>如何联系客服？&lt;/summary>
  &lt;p>可通过页面底部的邮箱或电话联系我们。&lt;/p>
&lt;/details>

✅ 小结

<details> 是 HTML5 原生折叠控件
<summary> 为可点击标题
默认折叠，可用 open 展开
可用 CSS 自定义样式
可用 JS 监听 toggle 事件

退出移动版