最近在折腾一个老项目，发现有个需求就是展示一些长篇的说明文档，但又不想一次性把所有内容都堆在页面上，看着太乱。寻思着搞个折叠效果，用户想看的时候点一下展开，不想看就收起来，清爽多了。想来想去，这不就是HTML的details标签干的事儿嘛今天就来记录一下我是怎么把它用起来的，贼方便。
最开始我就是想，有没有一个标签，自带展开收起的属性，不用我写JavaScript去控制什么开关状态，还能保持语义化。百度了一下，果然是details。我立马动手试了试。
基础用法，搭个架子
我先在HTML里头搭了个最简单的结构。这玩意儿本身就像个小小的黑箱子，默认是关着的。
- 我敲下了
<details>标签，作为整个折叠区域的容器。 - 然后在里面丢了个
<summary>标签，这个就是用户能看到的标题，点它才能展开。 - 把我想隐藏的内容，比如一大段文字或者图片，直接扔到
<summary>后面就行了。
代码看起来就像这样：
<details>
<summary>点我展开查看详细信息</summary>
<p>这些内容默认是隐藏起来的，只有点击标题才会出现。</p>
<p>是不是很简单？不用写一行JS代码。</p>
</details>
我先把这段代码扔到我的测试页面里运行了一下。果然，页面上就显示一个标题，前面有个小小的三角箭头。我用鼠标点了点那个标题，内容啪一下就出来了，箭头也转了个向。再点一下，内容又收回去了。这效果，比我之前用JavaScript写的各种开关简直快多了。
样式微调，让它更好看
原生的样子实在太朴素了，我得让它跟我网站的整体风格搭起来。光靠HTML是不够的，我得借助CSS来操刀。
我瞄准了那个箭头。原生的箭头图标不好看，我想把它干掉，自己用一个更精致的图标代替。我查了查，发现可以通过设置details[open]这个伪类来控制展开时的状态样式。
- 我给
details标签加了个类名，比如.foldable-box，方便CSS选择。 - 然后，我用CSS把
summary的默认列表标志给清掉：list-style: none;。 - 我给
summary元素设置一个背景图片或者伪元素（我选了伪元素::before），模拟我想要的箭头图标，通过transform: rotate(0deg);设置初始角度。 - 关键一步来了，当元素处于展开状态时（即
*-box[open] summary::before），我把伪元素旋转成90度（transform: rotate(90deg);），这样箭头看起来就是指向右边了，表示内容已展开。
再说说内容区域的排版。默认展开后内容和标题之间有点紧，我给details标签设置了一些内边距，让内容看起来更舒服一点。我还给整个区域加了个浅浅的边框，让它看起来像个独立的卡片。
实战应用，嵌套使用
我这回要处理的文档里，信息结构比较复杂，有好几层嵌套。我发现details标签完全可以嵌套使用。我可以在一个大的details里头，再放一个小一点的details。
我试着把一个二级菜单放进去了。外层的标题是“第一部分：基础设置”，点开后，里面有好几个小的设置项。我把每个设置项都用一个新的details包裹起来，标题是“子设置A”、“子设置B”。
这样，用户可以控制展开“第一部分”，如果想看“子设置A”的细节，再点开那个小标题就行了。这种层层深入的方式，可比一堆下拉菜单或者手写Tab页方便多了。我把所有CSS样式都应用到嵌套的标签上，确保视觉上它们是协调一致的，就是大小箭头要能区分开来。
检查了一下，用键盘Tab键切换焦点，按空格键也能触发展开收起，这个默认的可访问性支持得挺省得我再写一堆键盘事件处理了。感觉这回的内容折叠需求算是用最少的代码实现了最优雅的效果。
