HTML details 折叠面板

details/summary元素：原生展开/折叠面板、open属性默认展开、toggle事件监听、与CSS动画配合、FAQ手风琴应用 · 难度：入门 · +10XP

HTML details 折叠面板 —— 零JS的展开收起

网页上常见的常见问题（FAQ）展开面板，以前要靠JavaScript实现点击切换。HTML5 的 <details> 元素不用一行JS就能做出可折叠面板！

基本用法

<details>
  <summary>点击展开——什么是HTML？</summary>
  <p>HTML（HyperText Markup Language）是制作网页的标准标记语言。</p>
</details>

效果：页面上显示黑色小三角箭头+summary文字，点击后展开显示解释内容，箭头旋转为向下。再点一次收起。

open 属性 —— 默认展开

如果你希望面板默认就是展开状态：

<details open>
  <summary>重要公告（默认展开）</summary>
  <p>本周五下午3点系统维护，请提前保存工作。</p>
</details>

监听展开/收起事件

document.querySelector('details').addEventListener('toggle', function(e) {
  if (this.open) {
    console.log('面板打开了！');
  } else {
    console.log('面板关闭了！');
  }
});

实战：FAQ手风琴

<details><summary>退货政策是什么？</summary><p>购买后30天内可无理由退货。</p></details>
<details><summary>什么时候发货？</summary><p>下单后24小时内发货。</p></details>
<details><summary>支持货到付款吗？</summary><p>目前支持全国300+城市货到付款。</p></details>

动手练习

1. 基础练习：做一个个人简介折叠面板——点击名字展开详细信息（年龄、城市、爱好）。
2. 进阶应用：用 details 做一个课程大纲——第一章、第二章、第三章各是一个折叠面板，点开每章显示小节列表。默认第一章是展开的。
3. 项目实战：做一个完整的 FAQ 页面——至少5个常见问题，每道题用 details 折叠。用CSS美化成卡片样式，给 summary 加上 hover 变色效果。加一个全部展开/全部收起按钮。

接下来学什么？

下一课学习 picture 响应式图片——根据屏幕大小和格式支持，自动加载最合适的图片。