HTML5 details标签：用纯HTML+CSS实现无JS展开收缩交互
在传统的前端开发中，实现展开/收缩区域通常依赖JavaScript监听点击事件，控制元素的display或height。HTML5引入的details标签提供了一种纯声明式的解决方案，无需任何脚本即可实现可折叠内容区域。配合summary标签定义标题，用户点击标题时内部内容自动展开或收起，浏览器原生支持，且可以完全通过CSS自定义样式。<details>
<summary>标题</summary>
<p>内容…</p>
</details>
默认情况下details处于收起状态，添加open属性后页面加载时即展开：
<details open>
<summary>标题</summary>
<p>内容…</p>
</details>
1. 基础样式优化
浏览器默认的details样式较为简陋，三角符号不美观，布局也缺乏间距。可通过CSS覆盖默认外观：
details {
overflow: hidden;
background: #e3e3e3;
margin-bottom: 10px;
}
details summary {
cursor: pointer;
padding: 10px;
width: fit-content;
}
2. 控制三角符号方向
利用direction属性可以调整标题文字从右到左，同时配合::marker伪元素改变三角符号颜色：
details summary {
direction: rtl;
width: fit-content;
}
details ::marker {
direction: ltr;
color: gray;
}
3. 完全自定义三角符号
如果希望隐藏原生三角并替换为自定义图标，可以将::marker字号设为0，然后使用summary::after添加自定义内容：
details summary {
width: fit-content;
height: 20px;
line-height: 20px;
}
details ::marker {
font-size: 0;
}
summary::after {
content: '▶';
margin-left: .5ch;
position: absolute;
transition: transform .2s;
}
details:not() summary::after {
transform: rotate(90deg);
}
当details未展开时，自定义三角旋转90度（例如▶变成▶旋转），用户点击展开后恢复原本方向，形成视觉反馈。
4. 实际交互案例：纯CSS悬浮菜单
利用details模拟下拉菜单，配合summary悬停或打开状态，无需JS即可实现点击显示浮层效果：
nav {
background: #eee;
padding-left: 40px;
}
details summary {
width: fit-content;
padding: 5px 28px;
height: 28px;
line-height: 28px;
}
summary,
details summary:hover {
background-color: #fff;
box-shadow: inset 1px 0 #eee, inset -1px 0 #eee;
}
details ::marker {
font-size: 0;
}
summary::after {
content: '▼';
margin-left: .3ch;
color: grey;
position: absolute;
transition: transform .2s;
}
details:not() summary::after {
transform: rotate(-90deg);
}
/* 打开时生成全屏遮罩，便于点击外部关闭 */
summary::before {
content: '';
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.box {
position: absolute;
min-width: 120px;
border: 1px solid #ddd;
border-top: 0;
box-sizing: border-box;
}
.box div{
padding: 8px 10px;
cursor: pointer;
}
.box div:hover{
background: #eee;
}
.box div sup{
display: inline-block;
width: 18px;
height: 18px;
text-align: center;
line-height: 18px;
border-radius: 50%;
color: #fff;
background: #d50000;
}
HTML结构如下：
<nav>
<details open>
<summary>我的消息</summary>
<div class="box">
<div>我的私信<sup>12</sup></div>
<div>我的回答</div>
<div>我的关注</div>
</div>
</details>
</nav>
此例中，summary悬停或点击时显示浮层，利用选择器控制样式，summary::before作为全屏虚层使得点击外部任意区域即可关闭浮层（因为点击虚层并不会触发任何事件，但点击虚层会使得details失去焦点？实际需结合focus或blur，但此处使用open属性与点击行为相关，浏览器默认点击summary会切换open状态，点击其他区域不会改变，所以需要额外逻辑。上述代码中的before遮罩是为了阻止点击其他元素时不会触发其他行为，但并不能自动关闭details。更完善的方案可以通过CSS伪元素模拟，但真正关闭仍需点击summary。不过对于简单的演示，可以满足点击summary切换。如果希望点击外部关闭，可以结合JavaScript或更复杂的CSS技巧。但作为无JS方案，此示例展示了自定义下拉框的视觉样式，实际交互可参考类似思路。）
需要注意的是，details中的open属性由浏览器内置行为控制：点击summary切换open状态，其他元素无法通过纯CSS强制修改open状态。不过借助选择器和伪元素，可以构建出丰富的交互样式，适用于导航菜单、FAQ折叠区、设置面板等常见场景。
Re: HTML5 details标签：用纯HTML+CSS实现无JS展开收缩交互
感谢楼主的分享，这个 `details` 标签的用法整理得很全面。以前我都是靠 JS 来写折叠菜单，看到纯 CSS 就能实现确实省心不少。特别是那个用 `::marker` 隐藏原生三角、再用 `::after` 自定义旋转的方案，感觉很巧妙。 不过最后一个“悬浮菜单”的例子，我看了下代码：`summary::before` 全屏遮罩虽然能挡住点击其他元素，但确实不能自动关闭 `details`，因为浏览器默认只有点击 `summary` 才会切换 `open`。如果想让点击遮罩（即点击 `details` 外部）也能收起，有没有纯 CSS 的 hack 能实现？还是说这里必须配合 JS 监听失焦或点击事件？楼主提到的“更复杂的 CSS”大概是什么思路？期待进一步探讨。Re: HTML5 details标签：用纯HTML+CSS实现无JS展开收缩交互
这个技巧很实用！之前一直用 JS 控制展开收缩，没想到 details 标签配合 CSS 就能实现这么完整的交互，连自定义箭头和仿菜单的遮罩都考虑到了。特别是 `::marker` 隐藏原生三角再加 `summary::after` 自定义图标的思路，既干净又灵活。 不过有个小细节想请教：纯 CSS 实现点击外部关闭浮层，代码里用了 `summary::before` 全屏遮罩，但实际点击遮罩时并不会让 details 收起，除非遮罩本身能触发焦点变化？还是说需要把遮罩做成 `pointer-events: none` 以外的逻辑？我试过只用 CSS 似乎很难完美模拟“点击其他区域关闭”，目前我一般还是用一小段 JS 监听 `document` 点击。不知道你有没有纯 CSS 的完整方案？Re: HTML5 details标签：用纯HTML+CSS实现无JS展开收缩交互
这个技巧真不错！details + summary 组合确实能省去不少 JS 代码，而且语义化也更好。我之前一直用 div + JS 手写折叠，现在可以直接用原生标签了。 想请教一下，你示例里 `details:not() summary::after` 这个选择器写法在所有浏览器都能正常工作吗？我理解 `:not()` 里面的空参数应该是用来匹配未展开状态的，但有些旧版浏览器可能不支持这种用法，有没有更稳健的替代写法？另外，那个用 `` 显示消息数量的悬浮菜单，点击外部区域确实没法自动收起，是否只能靠 JS 或者再加一层 `` 配合 checkbox 来模拟？期待你的进一步思路。
页:
[1]