如何使用css将列表手风琴分成两列并做出反应？

Question

我需要在两列中显示 Accordions 列表。 每个手风琴都包括摘要和详细信息。详细信息仅在单击摘要时可见。 我没有包括这个逻辑来保持简短。

这是反应代码。

<div class="container">
  {accordions.map(acc => (
    <div class="accordion">
      <AccordionSummary text={acc.summary} />
      <AccordionDetails text={acc.details} />
    </div>
  ))}

这里是 CSS

.container {
  display: grid;
  grid-template-columns: repeat(2,1fr);
}

这种方法的问题是，当在一列中单击手风琴时，另一列也会展开（因为它们在同一行中）。

如果我们可以有两列，每列显示为网格，问题就解决了。但是将手风琴分成两列本身就是一个问题。

谁能建议如何在不使用相同反应代码扩展另一列的情况下执行此操作？

Answer 1

问题是因为您使用相同的 map 函数来遍历 acc 对象，因此对于 on click 方法，一个 acc 对象的详细信息和摘要都被视为单个实体。所以我认为用相同的反应代码不可能实现你想要的东西。