HTML <details> 标签（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：探索网页交互的简洁之道

在网页设计中，如何平衡信息密度与用户体验始终是一个重要课题。随着网页内容日益复杂，用户需要既能快速浏览关键信息，又能按需展开细节内容的解决方案。HTML

<details>  
  <summary>折叠标题</summary>  
  这里是折叠后显示的内容  
</details>  

<details open>  
  <summary>初始展开的内容</summary>  
  这部分内容会直接显示  
</details>  

<details>  
  <summary>一级标题</summary>  
  <details>  
    <summary>二级标题</summary>  
    <!-- 深度嵌套可能导致可读性下降 -->  
  </details>  
</details>  

details {  
  margin: 1rem 0;  
  border: 1px solid #ddd;  
  border-radius: 4px;  
}  

summary {  
  padding: 0.5rem 1rem;  
  background-color: #f0f0f0;  
  cursor: pointer;  
  font-weight: bold;  
}  

summary::-webkit-details-marker {  
  display: none;  /* 隐藏默认箭头 */  
}  

details[open] summary {  
  background-color: #e0e0e0;  
}  

details > *:not(summary) {  
  padding: 1rem;  
  background-color: white;  
  border-top: 1px solid #ccc;  
}  

<h2>常见问题</h2>  
<details>  
  <summary>如何重置密码？</summary>  
  <p>步骤1：访问安全中心 → 步骤2：...</p>  
</details>  

<details>  
  <summary>支持哪些支付方式？</summary>  
  <ul>  
    <li>支付宝</li>  
    <li>微信支付</li>  
  </ul>  
</details>  

<p>使用API时需要传递以下参数：</p>  
<details>  
  <summary>参数说明（展开查看）</summary>  
  <table>  
    <tr>  
      <th>参数名</th>  
      <th>类型</th>  
      <th>说明</th>  
    </tr>  
    <tr>  
      <td>user_id</td>  
      <td>String</td>  
      <td>用户唯一标识符</td>  
    </tr>  
  </table>  
</details>  

details {  
  transition: all 0.3s ease;  
}  

details:has([open]) {  
  transform: scale(1.02);  
}  

document.querySelectorAll('details').forEach(detail => {  
  detail.addEventListener('toggle', () => {  
    localStorage.setItem(  
      `detail-${detail.id}`,  
      detail.open  
    );  
  });  
});