popover API 的 toggle() 方法目前不可用；Chrome 114+ 等主流浏览器尚未实现，调用会报 TypeError，必须改用 showPopover() 和 hidePopover() 显式控制显隐。
popover API 的 toggle() 方法是否可用？
目前（2024 年中），toggle() 方法**尚未被任何主流浏览器实现**。Chrome 114+ 虽然启用了 popover 属性和基础 API，但 HTMLPopoverElement.toggle() 仍处于提案阶段，调用会直接报错：TypeError: element.toggle is not a function。别在生产环境里写 el.toggle()，它不会生效。
当前唯一可靠的方式：用 showPopover() 和 hidePopover()
必须显式调用两个方法分别控制显隐，不能依赖“切换”。注意它们是异步的（返回 Promise），但通常无需 await —— 除非你要在隐藏后立即操作 DOM 或做状态同步。
-
showPopover()：让元素显示为 popover，自动处理焦点、模态栈、滚动锁定等；多次调用无副作用 -
hidePopover()：主动收起；若该 popover 已关闭，调用无效果，也不会报错 - 二者都要求目标元素已添加
popover属性（如<div popover></div>）且已挂载到 DOM
const panel = document.getElementById('my-panel');
document.getElementById('toggle-btn').addEventListener('click', () => {
if (panel.matches('[popover=open]')) {
panel.hidePopover();
} else {
panel.showPopover();
}
});
为什么不能用 setAttribute('popover', '...') 模拟 toggle？
手动改 popover 属性值（比如从空字符串设为 "" 或 "auto"）**完全无效**。该属性仅在元素初始化时被解析，后续修改不触发任何行为。浏览器只认 popover 属性是否存在（布尔属性），不解析其值（除 popover="manual" 外，但那是另一套机制）。
-
<div popover></div>→ 自动模式，支持点击外部/ESC 关闭 -
<div popover="manual"></div>→ 手动模式，只能靠 JS 控制，且showPopover()/hidePopover()是唯一入口 - 写成
popover="auto"或popover="true"和单纯写popover效果一样
容易忽略的兼容性与陷阱
现在就上 popover API，得盯紧三件事：
- 检查
showPopover是否存在：if ('showPopover' in HTMLElement.prototype)，否则要降级（比如用hidden+ CSS 控制） -
popover元素必须是position: absolute或fixed的后代（或自身设为 relative），否则定位可能错乱；Chrome 当前对非绝对定位的 popover 支持不稳定 - 不要在未连接 DOM 的元素上调用（例如
document.createElement('div')后立刻showPopover()），会抛InvalidStateError
真正在意 toggle 语义的话，自己封装一层带状态判断的函数没问题，但底层还是得走 showPopover/hidePopover —— 浏览器没给捷径。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
