将“是可见的类”切换到“触发器元素”旁边的“div”(纯 JS)

Question

这应该是一个非常简单的下拉FAQ系统，我知道如何在jQuery中做到这一点，但我想学习简单的JS。

我只希望单个单击的触发器将可见类切换到单击的触发器旁边的内容div。就像 $（this）.next addClass 一样——就在 JS 中。

我真的尝试搜索这个问题，但显示的 90% 是如何在 jQuery 中做到这一点：-p

https://jsfiddle.net/48ea3ruz/

var allTriggers = document.querySelectorAll('.faq-trigger');
 for (var i = 0; i < allTriggers.length; i++) {
 // access to individual triggers:
 var trigger = allTriggers[i];
}
var allContent = document.querySelectorAll('.faq-content');
 for (var i = 0; i < allContent.length; i++) {
// access to individual content divs:
var content = allContent[i];
}
// I don't know how to target the faq-content div next to the clicked faq-trigger
this.addEventListener('click', function() {
content.classList.toggle('is-visible');
});

真的很感激一些建议！ ：-）

Answer 1

在迭代时使用 nextSibling .faq-trigger

var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
  allTriggers[i].addEventListener('click', function() {
     this.nextSibling.classList.toggle('is-visible');
  });
}

next

兄弟姐妹也会考虑文本节点，试试nextElementSibling也

var allTriggers = document.querySelectorAll('.faq-trigger');
for (var i = 0; i < allTriggers.length; i++) {
  allTriggers[i].addEventListener('click', function() {
     this.nextElementSibling.classList.toggle('is-visible');
  });
}