我有一个包含几个细节元素的 flexbox 容器。它们遵循 flex-wrap 行为。我希望一个 details-element 在打开时跳到容器的其他元素下方。

所以，它应该从这个开始：

对此：

之后打开的所有细节都应该以相同的方式运行并跳到最后一个位置。到目前为止，我已经尝试更改使用 javascript/jQuery 单击的详细信息元素的顺序：

我是否需要为此给细节元素一个类并以某种方式解决它们？或者有没有其他方法可以实现我正在寻找的东西？

这是我的第一个 JavaScript。它花了很多时间，但无法让它工作。

显然，它应该做的是在打开“详细信息/摘要”部分时更改图片。仅供参考，这是我试图解决的这个问题的后续行动。有人看到我做错了什么吗？

问题

我有一个detail标签列表，我想details在另一个标签打开时关闭一个打开的标签。

我正在动态呈现details标签列表

堆

我正在使用 React 和钩子

我的尝试

我将 open 属性设置为 useState 并在details单击标签时更新，但这似乎不起作用。

这是代码沙箱的链接

为什么这有效：

这是行不通的吗：

虽然代码本质上是完全重复的......

似乎事件侦听器本身已创建。但是，在 seconde 代码中没有正确处理 details.opened 语句，而在第一个代码中确实可以使用相同的方法。

有没有办法让第二种方法起作用？因为我需要创建超过 2000 个...