Svelte中如何按数组索引控制details/summary元素的开合

你之前的问题在于用单个isOpen布尔值绑定了所有循环生成的details元素，导致所有元素共享同一个状态，自然会同步切换。要实现按索引独立控制且点击其他元素自动关闭当前打开项，只需要用一个变量记录当前打开的索引即可，具体实现如下：

<script>
    let openIndex = null; // 初始状态：所有details都关闭

    const handleToggle = (idx) => {
        // 点击的是当前打开的项就关闭；否则切换到该项
        openIndex = openIndex === idx ? null : idx;
    };
</script>

<h1>当前打开的索引：{openIndex ?? '无'}</h1>
{#each Array(10) as _, idx}
<details 
    open={openIndex === idx}
    on:toggle={() => handleToggle(idx)}
>
    <summary>详情 {idx + 1}</summary>
    <p>
        这是第{idx + 1}个详情内容，仅当前项打开时可见。
    </p>
</details>
{/each}

核心逻辑说明： #

• openIndex变量存储当前处于打开状态的details的索引，初始为null表示全部关闭
• 每个details的open属性通过openIndex === idx判断：只有索引匹配的项才会打开
• 监听toggle事件，触发时更新openIndex：如果点击的是当前打开的项，就把openIndex设为null（关闭）；否则设为当前索引（打开该项，其他项因索引不匹配自动关闭）

这样就能实现点击任意details时，之前打开的会自动关闭，每个项的状态由索引独立控制。

内容的提问来源于stack exchange，提问作者Gourav Saini