HTML中toggle事件怎么用？基础入门指南-html教程-PHP中文网

details 元素没有名为 toggle 的事件别再搜索；它只在用户点击 summary 或按空格/回车时触发 toggle 事件，JS 修改 open 属性完全不会触发，需手动 dispatch 模拟。

html中toggle事件怎么用？基础入门指南

details 元素根本没有 toggle 事件

别再搜“details toggle event”了——浏览器压根不派发名为 toggle 的事件。你看到的 MDN 文档或某些代码示例里写的 addEventListener('toggle', ...)，其实监听的是类型为 toggle 的原生事件，但它只在用户点击

时触发，且JS 修改 open 属性完全不会触发它。

常见错误现象：

写了 details.ontoggle = () => {...}，没反应
在上监听 'toggle'，回调从不执行
执行 details.open = true 后期望日志输出，结果静默

正确监听 details 状态变化的写法

必须用 addEventListener('toggle', handler) 绑定到

元素本身，且仅响应用户交互（鼠标点击、空格/回车键）。

实操要点：

e.target 是元素，不是
直接读 e.target.open 判断当前状态，e.newState 值为 'open' 或 'closed'
e.detail 始终是 undefined，别依赖它
事件不冒泡，无法委托到父容器；也不能内联写成 ontoggle=""

最小可用示例：

const details = document.querySelector('details');
details.addEventListener('toggle', (e) => {
  console.log('新状态：', e.target.open ? '展开' : '收起');
});

JS 手动控制 open 时怎么触发逻辑？

这是最常被忽略的坑：details.open = true、details.setAttribute('open', '')、details.toggleAttribute('open') 都不会触发 toggle 事件。如果你既要支持用户点击，又要支持 JS 主动开闭（比如手风琴逻辑、URL 参数初始化），就得自己模拟。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

推荐做法是封装一个统一入口函数：

先设置 details.open = isOpen
再手动 dispatch 一个 toggle 事件，并附带 newState 和 target
所有开闭操作都走这个函数，避免状态和副作用脱节

简易模拟示例：

function setDetailsOpen(detailsEl, isOpen) {
  detailsEl.open = isOpen;
  const event = new Event('toggle', { bubbles: false });
  Object.defineProperty(event, 'target', { value: detailsEl });
  Object.defineProperty(event, 'newState', { value: isOpen ? 'open' : 'closed' });
  detailsEl.dispatchEvent(event);
}