HTML5 details标签：用纯HTML+CSS实现无JS展开收缩交互

脚本专家

在传统的前端开发中，实现展开/收缩区域通常依赖JavaScript监听点击事件，控制元素的display或height。HTML5引入的details标签提供了一种纯声明式的解决方案，无需任何脚本即可实现可折叠内容区域。配合summary标签定义标题，用户点击标题时内部内容自动展开或收起，浏览器原生支持，且可以完全通过CSS自定义样式。

2. <details>
3.   <summary>标题</summary>
4.   <p>内容…</p>
5. </details>

复制代码

默认情况下details处于收起状态，添加open属性后页面加载时即展开：

2. <details open>
3.   <summary>标题</summary>
4.   <p>内容…</p>
5. </details>

复制代码

1. 基础样式优化
浏览器默认的details样式较为简陋，三角符号不美观，布局也缺乏间距。可通过CSS覆盖默认外观：

2. details {
3.   overflow: hidden;
4.   background: #e3e3e3;
5.   margin-bottom: 10px;
6. }
7. details summary {
8.   cursor: pointer;
9.   padding: 10px;
10.   width: fit-content;
11. }

复制代码

2. 控制三角符号方向
利用direction属性可以调整标题文字从右到左，同时配合::marker伪元素改变三角符号颜色：

2. details summary {
3.   direction: rtl;
4.   width: fit-content;
5. }
6. details ::marker {
7.   direction: ltr;
8.   color: gray;
9. }

复制代码

3. 完全自定义三角符号
如果希望隐藏原生三角并替换为自定义图标，可以将::marker字号设为0，然后使用summary::after添加自定义内容：

2. details summary {
3.   width: fit-content;
4.   height: 20px;
5.   line-height: 20px;
6. }
7. details ::marker {
8.   font-size: 0;
9. }
10. summary::after {
11.   content: '▶';
12.   margin-left: .5ch;
13.   position: absolute;
14.   transition: transform .2s;
15. }
16. details:not([open]) summary::after {
17.   transform: rotate(90deg);
18. }

复制代码

当details未展开时，自定义三角旋转90度（例如▶变成▶旋转），用户点击展开后恢复原本方向，形成视觉反馈。

4. 实际交互案例：纯CSS悬浮菜单
利用details模拟下拉菜单，配合summary悬停或打开状态，无需JS即可实现点击显示浮层效果：

2. nav {
3.   background: #eee;
4.   padding-left: 40px;
5. }
6. details summary {
7.   width: fit-content;
8.   padding: 5px 28px;
9.   height: 28px;
10.   line-height: 28px;
11. }
12. [open] summary,
13. details summary:hover {
14.   background-color: #fff;
15.   box-shadow: inset 1px 0 #eee, inset -1px 0 #eee;
16. }
17. details ::marker {
18.   font-size: 0;
19. }
20. summary::after {
21.   content: '▼';
22.   margin-left: .3ch;
23.   color: grey;
24.   position: absolute;
25.   transition: transform .2s;
26. }
27. details:not([open]) summary::after {
28.   transform: rotate(-90deg);
29. }
30. /* 打开时生成全屏遮罩，便于点击外部关闭 */
31. [open] summary::before {
32.   content: '';
33.   position: fixed;
34.   top: 0;
35.   bottom: 0;
36.   left: 0;
37.   right: 0;
38. }
39. .box {
40.   position: absolute;
41.   min-width: 120px;
42.   border: 1px solid #ddd;
43.   border-top: 0;
44.   box-sizing: border-box;
45. }
46. .box div{
47.   padding: 8px 10px;
48.   cursor: pointer;
49. }
50. .box div:hover{
51.   background: #eee;
52. }
53. .box div sup{
54.   display: inline-block;
55.   width: 18px;
56.   height: 18px;
57.   text-align: center;
58.   line-height: 18px;
59.   border-radius: 50%;
60.   color: #fff;
61.   background: #d50000;
62. }

复制代码

HTML结构如下：

2. <nav>
3.   <details open>
4.     <summary>我的消息</summary>
5.     <div class="box">
6.       <div>我的私信¹²</div>
7.       <div>我的回答</div>
8.       <div>我的关注</div>
9.     </div>
10.   </details>
11. </nav>

复制代码

此例中，summary悬停或点击时显示浮层，利用[open]选择器控制样式，summary::before作为全屏虚层使得点击外部任意区域即可关闭浮层（因为点击虚层并不会触发任何事件，但点击虚层会使得details失去焦点？实际需结合focus或blur，但此处使用open属性与点击行为相关，浏览器默认点击summary会切换open状态，点击其他区域不会改变，所以需要额外逻辑。上述代码中的before遮罩是为了阻止点击其他元素时不会触发其他行为，但并不能自动关闭details。更完善的方案可以通过CSS伪元素模拟，但真正关闭仍需点击summary。不过对于简单的演示，可以满足点击summary切换。如果希望点击外部关闭，可以结合JavaScript或更复杂的CSS技巧。但作为无JS方案，此示例展示了自定义下拉框的视觉样式，实际交互可参考类似思路。）

需要注意的是，details中的open属性由浏览器内置行为控制：点击summary切换open状态，其他元素无法通过纯CSS强制修改open状态。不过借助[open]选择器和伪元素，可以构建出丰富的交互样式，适用于导航菜单、FAQ折叠区、设置面板等常见场景。

热心网友4

感谢楼主的分享，这个 `details` 标签的用法整理得很全面。以前我都是靠 JS 来写折叠菜单，看到纯 CSS 就能实现确实省心不少。特别是那个用 `::marker` 隐藏原生三角、再用 `::after` 自定义旋转的方案，感觉很巧妙。 不过最后一个“悬浮菜单”的例子，我看了下代码：`summary::before` 全屏遮罩虽然能挡住点击其他元素，但确实不能自动关闭 `details`，因为浏览器默认只有点击 `summary` 才会切换 `open`。如果想让点击遮罩（即点击 `details` 外部）也能收起，有没有纯 CSS 的 hack 能实现？还是说这里必须配合 JS 监听失焦或点击事件？楼主提到的“更复杂的 CSS”大概是什么思路？期待进一步探讨。