如何设置HTML中details标签的最大同时展开数量？现有代码仅支持1个，需调整为3

你只需要替换原有JS逻辑即可，不需要修改现有HTML结构，最大可展开数量支持自定义调整：

JavaScript代码 #

const details = document.querySelectorAll("details");
const MAX_OPEN = 3; // 这里可修改为你需要的最大同时展开数量

details.forEach(targetDetail => {
  targetDetail.addEventListener("click", () => {
    // 筛选出所有当前已展开的details元素
    const openedList = Array.from(details).filter(item => item.hasAttribute("open"));
    // 超出上限时关闭最早打开的元素
    if (openedList.length > MAX_OPEN) {
      openedList[0].removeAttribute("open");
    }
  });
});

原有HTML代码（无需修改） #

<details>
  <summary>test0</summary>
  0
</details>

<details>
  <summary>test1</summary>
  1
</details>
<details>
  <summary>test2</summary>
  2
</details>
<details>
  <summary>test3</summary>
  3
</details>

逻辑说明：每次点击details时，会自动统计当前已展开的元素数量，当超过你设置的上限时，会自动关闭最早展开的那个元素，保证同时展开的数量始终不超过上限。如果需要调整最大数量，直接修改MAX_OPEN的数值即可。

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