点击content类div切换Details类span显示隐藏失效问题求助

以下是你的代码存在的几个关键问题，以及修正后的实现方案：

问题分析 #

• NodeList操作错误：querySelectorAll()返回的是元素集合（NodeList），不能直接给集合绑定点击事件，也不能直接调用removeClass方法，必须遍历集合操作每个元素。
• 类名不匹配：JS里写的是.Display_right，但HTML和CSS里的类名是Details_right，完全不对应。
• 原生JS方法误用：原生DOM元素没有removeClass()方法，需要使用classList.remove()或classList.toggle()来操作类。
• 元素关联错误：每个.content应该只切换它所在容器内的详情元素，而不是操作页面上所有的详情元素。

修正后的代码 #

JavaScript #

document.addEventListener("DOMContentLoaded", function() {
  // 获取所有.content元素
  const contentElements = document.querySelectorAll(".content");
  
  // 遍历每个.content绑定点击事件
  contentElements.forEach(content => {
    content.addEventListener("click", function() {
      // 找到当前content所在容器内的详情元素（Details_right或Details_left）
      const detailElement = this.closest(".container").querySelector(".Details_right, .Details_left");
      // 切换hidden类实现显隐
      detailElement.classList.toggle("hidden");
    });
  });
});

CSS #

/* 默认样式 */
.Details_right, .Details_left {
  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类控制隐藏 */
.hidden {
  display: none !important;
}

HTML #

<div class="container right">
  <div class="content">
    <h2>2022</h2>
    <p>Title</p>
  </div>
  <!-- 默认添加hidden类让详情隐藏 -->
  <span class="Details_right hidden">
 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>

<!-- 左侧容器示例 -->
<div class="container left">
  <div class="content">
    <h2>2021</h2>
    <p>Another Title</p>
  </div>
  <span class="Details_left hidden">
  另一部分详情内容
</span>
</div>

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