Question

这应该是一个非常简单的下拉式常见问题解答系统，我知道如何在jQuery中执行此操作，但我想学习普通的JS。

我只希望单击的单击触发器将is-visible类切换到内容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

在您迭代.faq-trigger

时使用nextSibling

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

切换是触发元素旁边的Div可见类（Plain JS）

1 个答案: