单击事件侦听器始终隐藏除第一个元素之外的所有元素

Question

这是我为个人使用而构建的一个简单网页。目标是使每个部分可点击：被点击的部分将使用尚未添加的动画代码展开，而其他元素将被隐藏。单击同一元素将使其返回到原始大小，并且其他元素再次可见。但是，当前代码始终会导致第一个

.item

元素保留并隐藏其他元素，无论单击哪个元素。

let isExpanded = false;
const items = document.querySelectorAll(".item");

items.forEach(e => {
  e.addEventListener("click", event => {
    if (isExpanded === false) {
      items.forEach(f => {
        console.log(f.dataset.index);
        console.log(event.target.closest("[data-index]").dataset.index);
        if (f.dataset.index !== event.target.closest("[data-index]").dataset.index) {
          f.style.display = "none";
        }
      });
      isExpanded = true;
    } else {
      items.forEach(g => {
        g.style.display = "inline-block";
      });
      isExpanded = false;
    }
  })
});

* {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
  background-color: #0066ff;
}

#title {
  color: white;
}

#list {
  width: 90%;
  margin: auto;
}

.item {
  display: inline-block;
  width: 20%;
  margin: 20px;
  padding: 0 10px;
  border: solid 7px blue;
  border-radius: 3px;
  background-color: white;
}

<h1 id="title">
  「今週の英語フレーズ」履歴
</h1>
<div id="list">
  <div class="item" data-index="1">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="2">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="3">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
  <div class="item" data-index="4">
    <h2>10/10/2024</h2>
    <p>フレーズ：How are you?</p>
    <p>和訳：お元気ですか？</p>
    <p>動画：</p>
  </div>
</div>

Answer 1

代码运行良好，只是您将所有 div 设置为相同，因此您无法识别哪个 div 可见，只需更改所有 4 个潜水的日期即可查看代码是否运行正常！