HTML怎么做文章详情的折叠展开效果-html教程-PHP中文网

原生支持无JS折叠展开，但必须为首个子元素，中间不能有空格、注释或其它标签，否则点击失效；open为布尔属性，仅存在即默认展开。

html怎么做文章详情的折叠展开效果

直接用

+ 就能实现，不需要 JS，但必须确保是的第一个子元素，否则点不动。

为什么有时点击没反应

不是代码写错了，而是触发条件被破坏了：

必须是的首个子元素，中间插个 、注释或空格都会让折叠失效
Safari 15.4 之前不响应 el.open = true 这类 JS 赋值，得用 el.setAttribute('open', '')


微信、QQ 安卓旧版 WebView 可能始终展开或完全无响应，真机测试不能跳过
嵌套另一个  在部分浏览器中会静默失败，不报错也不生效
如何用 CSS 自定义展开箭头和动画
原生 
 不支持 height 或 display 过渡，但可以控制视觉反馈：

											
												
												
													使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
													使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
												
												下载
												
											
										

隐藏默认三角：用 summary::marker { content: ""; }（Chrome/Firefox 有效），Safari 需补 summary { list-style: none; } + summary::before 手动加图标
旋转动画要配合 details[open] summary::before { transform: rotate(90deg); } 和 transition: transform 0.2s

要滑动效果？必须放弃原生行为，改用 max-height + overflow: hidden + transition，此时需 JS 控制类名切换
别设 max-height: auto —— CSS 过渡不支持它，预估一个安全上限值（比如 max-height: 600px）更稳

文章详情里多段折叠内容怎么管理状态
纯 HTML 原生方案不记录状态，刷新即丢失；JS 方案要注意 DOM 顺序和冲突：

不要靠 classList.contains('active') 判断展开态，改用 data-expanded="true" 属性，避免其他逻辑干扰
如果文章含多个 ，默认都收起；想默认展开某一段，只在对应标签加 open 属性即可
第三方富文本编辑器（如微信公众号后台）可能过滤  标签，上传前务必实测渲染结果
用 details[open] 选择器做样式时，注意它不触发重排，但无法用于 JS 查询 —— 得用 el.hasAttribute('open')


最易被忽略的是：当文章内容由 JS 动态插入（比如 Markdown 渲染后挂载），
 不会自动绑定交互逻辑，必须手动调用 el.setAttribute('open', '') 或触发一次 click 模拟。原生标签不是“写完就跑”，它依赖初始 DOM 结构完整性。