和必须严格嵌套，因必须是的第一个直接子元素，否则浏览器静默失效；open是布尔属性，存在即展开，不可赋值；内禁放按钮或链接，避免事件冲突。
为什么 <details></details> 和 <summary></summary> 必须严格嵌套
点击没反应，不是 JS 问题，而是 HTML 结构错了。<summary></summary> 必须是 <details></details> 的**第一个直接子元素**，浏览器会静默忽略其他结构——不报错，但交互完全失效。
- 错误写法：
<details><p>说明文字</p> <summary>点我</summary><p>内容</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a> <p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p> </div> <a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div></details>（<p></p>挡在前面，<summary></summary>失效） - 正确写法：
<details><summary>点我</summary><p>内容</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></details> - 注意换行缩进：HTML 解析会把换行+空格当成文本节点，所以多行写时要么紧贴
<details></details>开始标签，要么用注释清除空白：<details><!-- --><summary>点我</summary></details>
open 属性为什么不能写成 open="true"
open 是布尔属性，只看“是否存在”，不看值。写成 open="false" 或 open="0" 都等同于 open —— 浏览器一律当作“已展开”处理。
- ✅ 正确：
<details open><summary>默认展开</summary></details> - ❌ 无效：
<details open="true"></details>、<details open="false"></details>、<details open=""></details> - JS 控制时也应使用
element.open = true或element.open = false，而不是 setAttribute
<summary></summary> 里为什么不能放按钮或链接
<summary></summary> 是折叠控件的触发区域，内部嵌套交互元素（如 <button></button>、<a></a>）会导致点击行为冲突：可能触发 summary 展开/收起，也可能触发内部元素事件，甚至焦点管理异常。
- 禁止写法：
<summary><button>点我</button></summary> - 替代方案：把需要交互的按钮放在
<details></details>内容区（<summary></summary>后面），或用 CSS + JS 模拟样式，但保持<summary></summary>纯文本或仅含<span></span>等非交互内联元素 - 样式定制只能用
::marker或::before，不能靠<summary></summary>内部结构撑开或定位
表单提交类交互为什么总卡在页面跳转
表单默认行为是整页刷新提交，看起来像“没交互”，其实是没阻止默认行为或没配对 method 和 action。
-
method值只能是"get"或"post"；写错（比如method="GET"全大写）在部分浏览器中会退化为get，但不可靠 -
action留空表示提交给当前 URL，适合 SPA 场景下由 JS 拦截；若想用 Fetch 提交，必须加event.preventDefault() - 常见漏点：忘了给
<form></form>绑onsubmit或addEventListener('submit', ...)，或监听了click却没处理表单 submit 事件本身
实际项目里，<details></details> 的 DOM 位置和 open 的布尔本质最容易被忽略；而表单交互的“页面跳转假死”现象，90% 出在没调 preventDefault() 或 action 路径配置错。
