Javascript Accordion 分配类单击事件

Question

当前，单击“accordion_container”时，类“open”被分配给“accordion_container”。到目前为止一切都很好。我想改变的是点击“accordion_title”类时会发生这种情况。 感谢您的帮助，我是 JS 的初学者:)

let leistungen_container = document.querySelectorAll(".accordion_container");

leistungen_container.forEach((leistungen_container) => {
  leistungen_container.addEventListener("click", (event) => {
    const open = document.querySelector(".accordion_container.open");

    if (open && open !== leistungen_container) {
      open.classList.toggle("open");
    }
    leistungen_container.classList.toggle("open");
  });
});

.accordion_container {
  background: green;
}
.accordion_container.open {
  background: pink;
}
.accordion_title.open {
  background-color: yellow;
}

<div class="accordion_container">
  <div class="accordion_title">
    <p>Corporate Title</p>
  </div>
  <div class="accordion_content">
    <p>Corporate Content</p>
  </div>
</div>

<div class="accordion_container">
  <div class="accordion_title">
    <p class="textmonster">Websites</p>
  </div>
  <div class="accordion_content">
    <p>Websites Content</p>

  </div>
</div>

<div class="accordion_container">
  <div class="accordion_title">
    <p class="textmonster">SEO &amp; SEA</p>
  </div>
  <div class="accordion_content">
    <p class="textmonster">SEO Content</p>
  </div>
</div>

Answer 1

您可以在添加事件监听器时选择标题，如下所示：

let leistungen_container = document.querySelectorAll(".accordion_container");

leistungen_container.forEach((leistungen_container) => {
  leistungen_container.querySelector(".accordion_title").addEventListener("click", (event) => {
const open = document.querySelector(".accordion_container.open");

  if (open && open !== leistungen_container) {
    open.classList.toggle("open");
  }

  leistungen_container.classList.toggle("open");
 });
});