如何将列表中的每个项目作为可折叠项目的目标？[副本]

Question

我有一个div元素列表，每个元素都包含一个标题和一个正文部分。最初仅显示每个项目的标题，单击时，相应的正文应显示在标题下方。再次单击标题时，主体应消失。我使用的逻辑是在每个列表项上附加/删除类名“extended”，以便通过CSS显示和隐藏正文部分。

现在，我正在尝试创建一个动态脚本，以允许几乎无限的列表条目，而不必专门针对每个条目，但我无法使它适用于所有条目。

HTML

<div class="list-wrapper">
    <div class="chapter chapter-1">
        <div class="chapter-header"></div>
        <div class="chapter-body"></div>
    </div>
    <div class="chapter chapter-2">
        <div class="chapter-header"></div>
        <div class="chapter-body"></div>
    </div>
    <div class="chapter chapter-3">
        <div class="chapter-header"></div>
        <div class="chapter-body"></div>
    </div>
</div>

JavaScript

var chapter = document.getElementsByClassName('chapter')[0];
var chapterHeader = document.getElementsByClassName('chapter-header')[0];

chapterHeader.addEventListener("click", function(){
    chapter.classList.toggle("extended");
});

上面的代码适用于第一项，但显然不适用于其余项。有什么想法吗？我对香草JavaScript代码感兴趣。提前谢谢。

Answer 1

我相信是这样的

chapterHeader.addEventListener("click", function(this){
        this.nextSibling.classList.toggle("extended");
    });

Answer 2

事件冒泡是关键词。

只向容器添加一个事件。单击容器时，它首先处理内部元素，然后处理外部元素。

let list = document.getElementById("myList");

list.addEventListener("click", function(event) {
  // Do stuff with target
  console.log(event.target.className);

})

<div id="myList" class="list-wrapper">
  <div class="chapter chapter-1">
    <div class="chapter-header">Chapter header 1</div>
    <div class="chapter-body">Chapter body 1</div>
  </div>
  <div class="chapter chapter-2">
    <div class="chapter-header">Chapter header 2</div>
    <div class="chapter-body">Chapter body 2</div>
  </div>
  <div class="chapter chapter-3">
    <div class="chapter-header">Chapter header 3</div>
    <div class="chapter-body">Chapter body 2</div>
  </div>
</div>

Answer 3

您需要使用方法foreach（）来处理类的集合。还有方法最接近（），它允许您引用当前元素的指定父级。

尝试以下it代码：

let chapterHeader = document.querySelectorAll('.chapter-header');

chapterHeader.forEach(function(chapterHeader_current, index) {
  chapterHeader_current.addEventListener('click', function() {
    let current_chapter = this.closest('.chapter');
    current_chapter.classList.toggle("extended");
  });
});