HTML代码中details独占手风琴效果-html教程-PHP中文网

details标签原生支持手风琴效果，点击一个自动收起其他已展开项；同时展开是因人为破坏默认行为，如静态设open属性、js强制设置或css覆盖；需确保互斥可用toggle事件监听控制。

html代码中details独占手风琴效果

details标签默认就是手风琴效果，不需要额外JS

HTML <details></details> 本身是原生折叠组件，浏览器自动实现单开单关——点一个<details></details>，其他已展开的会自动收起。这不是“独占”而是规范行为，源于details元素的语义和UA样式（User Agent stylesheet）控制逻辑。

常见误解是以为要靠JS模拟手风琴，其实只要不手动干预open属性或用JS强制多开，它天然就是互斥的。

多个details共存时，为什么有时会同时展开？

这是人为破坏了默认行为，典型原因有：

给多个<details></details>都加了open属性（静态HTML里写死）
用JS批量设置element.open = true，没做状态清理
CSS里写了details[open] { display: block !important; }之类覆盖了原生折叠逻辑
在Vue/React中用v-model或useState绑定多个open状态，但没同步控制互斥

想确保严格手风琴，推荐用`<details></details>` + 少量JS控制

纯HTML够用，但若需更可控（比如点击标题区域外也触发、支持键盘操作），可加轻量JS：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

document.querySelectorAll('details').forEach(detail => {
  detail.addEventListener('toggle', () => {
    if (detail.open) {
      document.querySelectorAll('details:not([open])').forEach(d => d.removeAttribute('open'));
    }
  });
});

注意：toggle事件在Chrome/Firefox/Edge中稳定支持，Safari 15.4+ 也已支持；不要用click监听<summary></summary>，因为用户可能用空格/回车触发，toggle才是语义正确时机。

移动端点击无响应？检查`<summary></summary>`是否被遮挡或禁用

<details></details>的交互区域仅限<summary></summary>内容部分，常见坑：

<summary></summary>内嵌<button></button>或<a href="#"></a>且没阻止默认行为，导致toggle不触发
CSS写了pointer-events: none或user-select: none到<summary></summary>上
父容器有overflow: hidden且<summary></summary>超出裁剪，点击无效
使用了position: absolute让<summary></summary>脱离文档流，导致点击热区错位