实现 Svelte 中基于数组索引的 details 元素单开单关交互-html教程-PHP中文网

实现 Svelte 中基于数组索引的 details 元素单开单关交互

本文讲解如何在 Svelte 中为 #each 循环生成的多个元素实现「点击展开当前项、自动收起其他项」的单选式交互，避免所有元素同步开关，并通过索引精准控制开闭状态。

本文讲解如何在 svelte 中为 `#each` 循环生成的多个 `

` 元素实现「点击展开当前项、自动收起其他项」的单选式交互，避免所有元素同步开关，并通过索引精准控制开闭状态。

在 Svelte 应用中，当使用 {#each} 渲染一组

元素时，若直接绑定同一个布尔变量（如 bind:open={isOpen}），会导致所有折叠面板联动开关——这显然不符合“仅展开当前项”的常见交互需求。正确解法是：为每个
独立关联其索引状态，通过监听 toggle 事件动态更新当前激活索引
。

✅ 推荐实现方案

核心思路是维护一个响应式变量 opened，用于记录当前处于展开状态的元素索引（初始为 null 表示全部关闭）。在循环中，利用 open={opened === i} 控制每个

的显隐，并在 on:toggle 中判断 e.target.open 状态，仅在用户主动展开时更新 opened：

<script>
  // 示例数据源（实际项目中可替换为任意数组）
  const items = Array.from({ length: 5 }, (_, i) => `Item ${i + 1}`);

  // 跟踪当前展开项的索引，null 表示无展开项
  let opened = null;
</script>

{#each items as item, i}
  <details open="{opened" i on:toggle="{(e)"> {
      if (e.target.open) {
        opened = i; // 仅在展开时更新，收起时不干预（保持 opened 不变，其他项自动关闭）
      }
    }}
  >
    <summary>{item}</summary><p>This is the detailed content for {item}. It appears only when expanded.</p>
  </details>
{/each}

⚠️ 关键注意事项

不要使用 bind:open：它会双向绑定并强制同步所有元素的状态，破坏独立性；
on:toggle 是关键事件：
元素原生支持 toggle 事件，且在用户点击
时触发，比监听 click 更语义化、更可靠；
收起时不重置 opened：当用户再次点击已展开项时，e.target.open 为 false，我们不修改 opened，此时其他
的 open={opened === i} 自动变为 false，实现自然收起；
索引一致性保障：确保 #each 中的索引 i 是稳定唯一的（如使用真实数组而非 Array(5) 这类无意义占位符，推荐传入带业务含义的数据数组）；