HTMLdetails和summary标签的折叠内容格式实现-html教程-PHP中文网

HTMLdetails和summary标签的折叠内容格式实现

絕刀狂花

发布： 2025-10-04 10:14:02

原创

608人浏览过

答案：使用HTML的details和summary标签可创建可折叠内容区域，details定义折叠块，summary定义标题，点击可展开或收起详细信息。

htmldetails和summary标签的折叠内容格式实现

使用HTML的details和

标签可以轻松实现内容的折叠与展开，无需JavaScript或CSS即可完成基础交互效果。

details 和 summary 标签的基本用法

details 标签用于创建一个可折叠的容器，summary 作为其子元素，定义展开/折叠的标题。默认状态下内容是收起的。

示例代码：

<details>
  <summary>点击展开说明</summary>
  <p>这里是被隐藏的内容，用户点击标题后会显示出来。</p>
</details>

登录后复制

浏览器中显示为一个可点击的标题，点击后展开内部内容。

默认展开设置

如果希望内容默认处于展开状态，可以在 details 标签上添加 open 属性。

标书对比王

标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。

查看详情

立即学习“前端免费学习笔记（深入）”；

示例：

<details open>
  <summary>默认展开的标题</summary>
  <p>这部分内容一开始就是可见的。</p>
</details>

登录后复制

样式美化建议

虽然原生标签已有基本样式，但可通过CSS调整外观，提升视觉体验。

修改 summary 的鼠标指针：cursor: pointer;
去除默认标记（如小箭头）可用 -webkit-user-select: none; 配合其他样式控制
自定义展开/收起图标，结合伪元素或背景图增强表现力

简单样式示例：

summary {
  font-weight: bold;
  cursor: pointer;
  list-style: none;
}
summary::after {
  content: " ▼";
  font-size: 0.8em;
}
details[open] summary::after {
  content: " ▲";
}

登录后复制

适用场景与注意事项

适合用于帮助文档、问答折叠、配置项分组等需要节省空间的场合。

语义清晰，对无障碍访问友好（屏幕阅读器能识别）
不支持老版本IE，需考虑兼容性要求
内部可嵌套任意HTML内容，如段落、列表、代码块等

基本上就这些，结构简单且实用。

以上就是HTMLdetails和summary标签的折叠内容格式实现的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

CSS样式怎么嵌入HTML文件_CSS样式嵌入HTML文件的实用技巧如何编辑网页HTML中的多语言支持_如何编辑网页HTML中多语言切换的代码 html如何清理缓存_html清理缓存的详细步骤与方法 html源码怎么保存在浏览器中_html源码从浏览器保存的方法 html源码如何保存到文件夹中_html源码保存至文件夹中的操作方法