index.html如何实现点击展开详细内容？-html教程-PHP中文网

details 和 summary 标签原生支持点击展开收起，无需 javascript；details 为容器，summary 为唯一且首个子元素的标题行；默认收起，加 open 属性可默认展开；支持自定义箭头图标 via ::marker。

index.html如何实现点击展开详细内容？

用 `details` 和 `summary` 最快实现点击展开

不用写 JS，原生 HTML 就能搞定。浏览器支持已很成熟（Chrome 12+、Firefox 49+、Safari 6+、Edge 79+），移动端也完全可用。

核心是这两个标签：details 是容器，summary 是可点击的标题行，其余内容默认收起：

<details><summary>点击查看说明</summary><p>这里是详细内容，初始不可见。</p>
  <p>支持任意 HTML 元素，包括列表、代码块、图片。</p>
</details>

details 默认是关闭状态；加 open 属性可默认展开：<details open></details>
summary 只能有一个，且必须是 details 的第一个子元素
点击 summary 文本或其空白区域都会触发展开/收起，无需额外绑定事件
不支持嵌套动画（如淡入/滑动），如需过渡效果得配合 CSS + JS

想加箭头图标？用 CSS 控制 `summary` 的伪元素

浏览器默认在 summary 左侧显示一个三角形，但样式不可控。要自定义箭头（比如右向 → 或下向 ↓），得用 ::marker 或 ::before：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

summary {
  list-style: none; /* 先清掉默认三角 */
}
summary::marker {
  content: "▶ "; /* 展开态箭头 */
}
details[open] summary::marker {
  content: "▼ "; /* 收起态箭头 */
}

::marker 在 Chrome/Firefox/Edge 中稳定支持，Safari 15.4+ 开始支持
如果兼容旧 Safari（summary::before + details[open] 切换 content
避免用背景图或 SVG 图标做箭头——会破坏语义和屏幕阅读器识别

需要 JS 监听展开/收起动作？监听 `toggle` 事件

details 元素在用户点击时会触发 toggle 事件，不是 click，也不是 change：

document.querySelector('details').addEventListener('toggle', function(e) {
  if (this.open) {
    console.log('已展开');
    // 可在这里懒加载内容、发埋点、触发动画
  } else {
    console.log('已收起');
  }
});