时间戳

首页 > 解决方案 > 如何使用可折叠项目定位列表中的每个项目？

javascript - 如何使用可折叠项目定位列表中的每个项目？

问题描述

我有一个 div 元素列表，每个元素都包含一个标题和一个正文部分。最初只显示每个项目的标题，单击时，相应的正文应出现在标题下方。再次单击标题时，正文应消失。我使用的逻辑是在每个列表项上附加/删除“扩展”类名称，以便通过 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 代码感兴趣。提前致谢。

标签： javascripthtml

解决方案

您需要使用方法forEach()来处理类的集合。还有 method closest()，它允许您引用当前元素的指定父级。

试试这个代码：

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");
  });
});

推荐阅读