怎样实现内容的按需加载_DETAILS与SUMMARY标签-html教程-PHP中文网

原生支持按需展开，语义清晰且无障碍友好；关键要求是必须为首个子元素，否则失效；默认收起，加open属性可默认展开；内部可嵌套任意html；兼容性差，ie不支持，旧android webview异常，需渐进增强。

怎样实现内容的按需加载_details与summary标签

用 `<details></details>` 和 `<summary></summary>` 实现原生按需展开

浏览器原生支持，不用 JS 就能实现点击展开/收起，语义清晰、无障碍友好。关键点是：<summary></summary> 必须是 <details></details> 的第一个子元素，否则无法触发折叠逻辑。

常见错误：把 <summary></summary> 放在中间或末尾，或者用 div 包裹它——这会让浏览器忽略其控制行为，<details></details> 会始终处于展开态。

<details></details> 默认是收起状态；加 open 属性可默认展开
<summary></summary> 内容会始终可见，点击后才切换内部其他内容的显示/隐藏
内部可以放任意 HTML（包括表单、图片、甚至嵌套 <details></details>）

<details><summary>点击查看配置项</summary><p>端口：</p>
<pre class="brush:php;toolbar:false;">8080
  <p>环境：<code>production</code></p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img
														src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a>
													<p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>

样式定制必须覆盖 `summary::marker 和默认箭头`

不同浏览器对 <summary></summary> 前的三角符号（marker）渲染不一致：Chrome/Firefox 显示实心箭头，Safari 是空心，且默认不可选中、无法通过 color 直接改色。直接写 summary { font-weight: bold; } 没问题，但想换图标或隐藏箭头，必须处理 ::marker。

隐藏原生箭头：summary::marker { content: ""; }
替换成自定义符号（如 + / −）：summary::marker { content: "+"; }，再配合 JS 切换状态时更新
注意 Safari 16.4+ 才完全支持 ::marker 的 content，旧版需用 list-style: none + position: relative 模拟

JS 控制展开状态要操作 `open` 属性，不是 `display`

手动调用 element.open = true 或 element.setAttribute('open', '') 才能同步 UI 与 DOM 状态；如果只改 style.display，<details></details> 的语义和键盘导航（如回车触发）会失效。

监听展开/收起事件用 toggle 事件：el.addEventListener('toggle', () => {...})
批量控制多个 <details></details> 时，避免用 querySelectorAll('details').forEach(d => d.open = false) —— 这会强制重排，建议加 class 配合 CSS details:not(.active) > *:not(summary) { display: none; }
服务端渲染时若预设 open，注意 SSR 框架（如 Next.js）可能因 hydration 不匹配报 warning，需用 useEffect 或 useClient 延迟设置

兼容性边界：IE 完全不支持，旧 Android WebView 表现异常

<details></details> 在 IE 中彻底不可用（连标签都不识别），Android 4.4–6.x 的 WebView 会渲染但不响应点击。不能只靠它做核心功能降级。

渐进增强方案：先确保所有内容在无 JS、无 <details></details> 时仍可读（即不依赖 JS 展开）
检测支持性可用 'open' in document.createElement('details')，返回 false 时 fallback 到 JS 实现的折叠组件
CSS 中慎用 details[open] > summary::marker { content: "−"; } 这类选择器——部分老版本 Chrome 不支持属性选择器作用于伪元素

最常被忽略的是焦点管理：默认 <summary></summary> 可聚焦、可空格/回车触发，但如果内部有表单控件，收起时应主动 blur()，否则键盘用户可能卡在不可见区域。