HTML中Details与Summary标签在交互式文档中的零代码实现-html教程-PHP中文网

默认展开需直接写open属性，非open="true"；summary须为details首个子元素且避免事件拦截；箭头样式应隐藏::marker后用::before绘制；嵌套时子级不独立开关属规范行为。

html中details与summary标签在交互式文档中的零代码实现

Details标签默认展开状态怎么控制

默认收起是<details></details>的天然行为，想默认展开只需加open布尔属性——不是open="true"，也不是open="open"，就是单纯写open。漏掉这个属性或写成open=""都无效，浏览器只认有没有这个关键词。

常见错误：用JS动态加open属性但忘了触发重绘，其实只要element.open = true就行，不用setAttribute；反过来，设为false会立即收起，比removeAttribute('open')更可靠。

Summary内容被点击后不展开？检查嵌套和事件拦截

<summary></summary>必须是<details></details>的**第一个子元素**，且不能被其他标签包裹（比如<p><summary>...</summary></p>就失效）。另外，如果<summary></summary>里有button、a或带onclick的元素，点击它们会冒泡中断默认展开行为。

解决办法：给干扰元素加event.stopPropagation()，或者改用span + CSS模拟按钮样式
注意：Chrome 91+ 支持<summary></summary>内用slot，但Safari至今不支持，别依赖

自定义Summary箭头样式时为什么失效

浏览器对<summary></summary>的默认三角图标是通过::marker伪元素实现的，但这个伪元素在Firefox里不可见，在Safari里无法用content覆盖。最稳的方式是隐藏原生图标，再用::before或background-image手动画一个。

关键CSS：

Free Ride - Unlimited free AI

一款AI工具，主要用于管理 OpenClaw 所使用的来自 OpenRouter 的免费 AI 模型。自动按质量对模型进行排序，配置回退机制以应对速率限制，并更新 opencla...，适合需要提升相关任务效率的用户。

下载

details summary {
  list-style: none;
}
details summary::marker {
  content: "";
}
details summary::before {
  content: "▶";
  margin-right: 6px;
  transition: transform 0.2s;
}
details[open] summary::before {
  content: "▼";
}

别用font-awesome类名直接加在<summary></summary>上——它依赖JS初始化，零代码场景下会失败。

Details嵌套导致子级无法独立开关

HTML标准允许<details></details>嵌套，但父级open状态改变时，所有子<details></details>会跟着重绘，视觉上像“联动”。这不是bug，是规范行为：子级的open属性仍有效，只是父级收起时子级被强制隐藏（display:none），不触发自身toggle事件。

如果真需要独立控制：