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

本文讲解如何在 Svelte 中为 #each 循环生成的多个 <details> 元素实现「点击展开当前项、自动收起其他项」的单选式交互，避免所有元素同步开关，并通过索引精准控制开闭状态。 本文讲解如何在 svelte 中为 `#each` 循环生成的多个 `` 元素实现「点击展开当前项、自动收起其他项」的单选式交互，避免所有元素同步开关，并通过索引精准控制开闭状态。在 Svelte 应用中，当使用 {#each} 渲染一组 <details> 元素时，若直接绑定同一个布尔变量（如 bind:open={isOpen}），会导致所有折叠面板联动开关——这显然不符合“仅展开当前项”的常见交互需求。正确解法是：为每个 <details> 独立关联其索引状态，通过监听 toggle 事件动态更新当前激活索引。? 推荐实现方案核心思路是维护一个响应式变量 opened，用于记录当前处于展开状态的元素索引（初始为 null 表示全部关闭）。在循环中，利用 open={opened === i} 控制每个 <details> 的显隐，并在 on:toggle 中判断 e.target.open 状态，仅在用户主动展开时更新 opened： 幻导航网 发现优质实用网站,开启网络探索之旅！