原生 details/summary 最快实现可折叠面板，语义正确、键盘可访问、无需 JS/CSS 框架；需确保 summary 为首个子元素，避免干扰 ::marker 箭头，用 [open] 和 toggle 事件控制状态与样式。
用 details 和 summary 最快实现可折叠面板
原生 HTML 就支持，不需要 JS 或 CSS 框架。浏览器默认样式简洁，语义正确，还自带键盘可访问性（空格/回车切换展开状态）。
常见错误是手动写 div + JS 控制 display，结果破坏了语义、丢失焦点管理、移动端点不灵——其实 details 就是为这个场景设计的。
基本结构如下：
<details> <summary>操作面板</summary> <p><button>保存</button> <button>重置</button></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>
-
summary必须是details的第一个子元素，否则无法触发折叠逻辑 - 默认收起；加
open属性可默认展开：<details open></details> - 不要给
summary设display: block或flex等布局，会干扰内置箭头渲染（尤其 Safari）
自定义箭头和样式必须用 ::marker 和 [open]
想换箭头图标、改字体、加背景？不能靠包裹或伪元素硬盖，得用标准 CSS 选择器。
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
关键点：
- 隐藏默认箭头用：
summary::marker { content: none; } - 加自定义图标（如 Font Awesome）：
summary::before { content: "▶"; }，再用[open] summary::before { content: "▼"; }切换 - 整个面板展开时加背景色：
details[open] { background: #f9f9f9; } - 避免对
summary设置padding-left过大，否则点击热区偏移，移动端易误触
需要 JS 监听展开/收起事件？用 toggle 事件
不是 click，也不是 change——details 元素只在用户交互（包括键盘）导致状态变化时触发 toggle。
实操示例：
document.querySelector('details').addEventListener('toggle', function() {
if (this.open) {
console.log('面板已展开');
// 可在此懒加载表单控件、初始化 DatePicker 等
} else {
console.log('面板已收起');
}
});
- JS 调用
element.open = true不会触发toggle事件，仅用户行为才触发 - 若需程序化控制后同步执行逻辑，得手动
dispatchEvent(new Event('toggle'))（慎用，易循环） - 多个
details面板共存时，别用querySelector写死，建议委托到父容器监听
IE 不支持，但现代项目基本不用管
details 在 Chrome 12+、Firefox 49+、Safari 6+、Edge 79+ 均原生支持。IE 完全不支持，且无优雅降级方案（polyfill 只能模拟行为，无法修复语义和可访问性）。
如果你的项目明确要求兼容 IE11 或更早版本：
- 放弃原生方案，改用
aria-expanded+aria-controls手动实现，并严格测试键盘导航（Tab/Shift+Tab/Enter/Space） - 用
max-height+transition做 CSS 动画展开，但注意：内容高度不确定时，max-height: 0→max-height: 500px是常见取巧法，不够精确 - 别用
height: auto做过渡，CSS 不支持该属性动画
真正容易被忽略的是：即使用了 details，如果面板里放了 input 或 select，首次展开时它们的初始值可能未被正确聚焦或校验——得在 toggle 事件里补一手初始化逻辑。
