在触发元素旁边切换可见 Class 到 Div（纯 JS）

Question

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

我只希望单个单击的触发器将可见 class 切换到内容 div next 到单击的触发器。就像 $(this).next addClass — 就在 JS 中。

我真的试图搜索这个问题，但 90% 的结果是 jQuery 中的解决方法 :-p

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

nextSibling 也会考虑文本节点，尝试 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');
  });
}

在触发元素旁边切换可见 Class 到 Div（纯 JS）

Toggle is-visible Class to Div Next to Trigger Element (Plain JS)

html

javascript

loops

selectors-api