HTML编辑器怎么制作手风琴效果？手风琴组件编写-html教程-PHP中文网

现代浏览器可用details+summary实现手风琴，语义正确且无障碍友好；兼容ie/旧edge需js+aria-expanded+hidden；动态内容用事件委托；动画推荐scrollheight+height过渡而非max-height。

html编辑器怎么制作手风琴效果？手风琴组件编写

手风琴用 `details` 元素最省事，但兼容性有坑

现代浏览器（Chrome 12+、Firefox 49+、Safari 6.1+）原生支持 details + summary 实现手风琴，无需 JS，语义正确，还自带焦点和键盘支持（空格/回车展开收起）。但 IE 完全不支持，Edge 18 及更早版本也不行。

如果项目需兼容 IE 或旧 Edge，必须降级为 div + JS 控制 aria-expanded 和 class 切换；否则直接上 details 是最快最健壮的选择。

details 默认可聚焦，按 Tab 进入后，空格/回车即可切换，无障碍友好
不能用 CSS 伪类 ::before 覆盖 summary 的默认箭头（部分浏览器会忽略），要用 list-style: none + 自定义图标
想默认展开？加 open 属性：<details open><summary>标题</summary>内容</details>

用 JS 手动实现时，`aria-expanded` 和 `hidden` 必须同步更新

手动控制手风琴状态时，只切 class 或只改 display 样式是不够的。屏幕阅读器依赖 aria-expanded 判断当前状态，而 hidden 属性比 display: none 更可靠地隐藏语义内容（尤其对辅助技术）。

错误写法：el.style.display = 'none' 后没设 el.setAttribute('aria-expanded', 'false') —— 这会让读屏软件“看到”按钮说“已展开”，但内容却不可见。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

每次点击标题，先查当前 aria-expanded 值，再反向设置
内容容器建议同时用 hidden 属性和 CSS 控制可见性：content.hidden = !isOpen + [hidden] { display: none; }
避免用 visibility: hidden 或 opacity: 0 隐藏内容——它们仍会被读屏软件解析

多个手风琴项共存时，别用 `querySelectorAll('.accordion-item')` 硬绑事件

静态绑定所有 .accordion-item 的 click 事件看似简单，但遇到动态插入新项（比如 AJAX 加载内容后追加）就会失效。更稳的方式是事件委托到父容器。

假设父容器有 id="faq-accordion"，标题元素是 .accordion-header：

document.getElementById('faq-accordion').addEventListener('click', (e) => {
  const header = e.target.closest('.accordion-header');
  if (!header) return;
  const item = header.parentElement;
  const content = item.querySelector('.accordion-content');
  const isOpen = content.hidden;
  content.hidden = !isOpen;
  header.setAttribute('aria-expanded', !isOpen);
});