通过点击div元素来隐藏和显示span元素？

Question

我尝试通过单击具有类内容的特定时间轴 div 元素来显示和隐藏简历的详细信息（具有类Details_right 或Details_left 的span 元素），但它似乎不起作用，我不知道我是什么失踪了。

我期望它添加和删除隐藏到元素的类，但它没有

document.addEventListener("DOMContentLoaded", function() {
  const content = document.querySelectorAll(".content");
  const DisplayRight = document.querySelectorAll(".Display_right");
  content.addEventListener("click", function() {
    DisplayRight.removeClass("hidden");
  });
});

.Details_right {
  display: flex;
  position: absolute;
  z-index: 999;
  width: 90vw;
  margin-left: -190px;
  background-color: var(--accent1-color);
  border: solid var(--background-color2) 2px;
  border-radius: 1rem;
}

<div class="container right">
  <div class="content">
    <h2>2022</h2>
    <p>Title</p>
  </div>
  <span class="Details_right">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</span>
</div>

Answer 1

您应该首先在 CSS 中添加 .hidden 类，然后在 JS 中使用 classList.toggle。另外，由于内容是一个列表，您应该使用 forEach，然后将事件侦听器添加到该列表中的每个元素。

按如下方式修改您的代码：

document.addEventListener("DOMContentLoaded", function() {
  const contents = document.querySelectorAll(".content");

  contents.forEach(function(content) {
    content.addEventListener("click", function() {
      const DisplayRight = content.nextElementSibling;
      DisplayRight.classList.toggle("hidden");
    });
  });
});

.Details_right {
  display: flex;
  position: absolute;
  z-index: 999;
  width: 90vw;
  margin-left: -190px;
  background-color: var(--accent1-color);
  border: solid var(--background-color2) 2px;
  border-radius: 1rem;
}

.hidden {
    display: none;
}

<div class="container right">
  <div class="content">
    <h2>2022</h2>
    <p>Title</p>
  </div>
  <span class="Details_right">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes</span>
</div>