使用 HTML 创建可折叠的交互式组件，一行 JS 代码也不用写

zhezhongyun 2025-05-21 17:58 2 浏览

如果你想创建一个可折叠的交互式组件，使用 <details> 元素即可，一行 JavaScript 也不用写。

<details> 组件定义了一个可折叠的容器，它的第一个元素必须是 <summary> 元素，代表标题，用户点击它可以控制区域的显示和隐藏。后面的元素随便写，它们会出现在打开的面板中。

<details>
  <summary>我是标题</summary>
  <p>
    我是具体的内容，我是第一段。
  </p>
</details>

如果你想让 <details> 默认打开，添加 open 属性。

<details open>
  <summary>我是标题</summary>
  <p>
    我是具体的内容，我是第一段。
  </p>
</details>

如果把多个 <details> 放在一起，并且给它们设置相同的 name 属性，就可以形成联动效果。点击其中一个，其余面板自动关闭。

<details open name="demo">
  <summary>我是标题 1</summary>
  <p>
    我是具体的内容，我是第一段。
  </p>
</details>

<details name="demo">
  <summary>我是标题 2</summary>
  <p>
    我是具体的内容，我是第二段。
  </p>
</details>

<details name="demo">
  <summary>我是标题 3</summary>
  <p>
    我是具体的内容，我是第三段。
  </p>
</details>

默认样式比较简陋，使用 CSS 给它们化化妆。

details {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  overflow: hidden;
}

summary {
  cursor: pointer;
}

details[open] {
  padding: 0;
}

details[open] summary {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  background: skyblue;
}

details > p {
  padding: 10px;
}

CSS 创建

上一篇：AI实用指南:Rules编写规则详解，从前端到后端的技术栈全覆盖
下一篇：在 JAVASCRIPT 中创建 HTML 元素...

使用 HTML 创建可折叠的交互式组件，一行 JS 代码也不用写

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?