使用纯js获取具有特定类别的clicked元素的下一个元素

Question

我试图获得具有特定类的第一个元素,该元素遵循使用纯JS(无JQuery)单击的元素,但是获取el.nextSibling不是函数错误.最初我使用的是JQuery parents().next()但是想用纯JS做这个:

const togglers = document.querySelectorAll('.toggler');
//console.log(togglers);
togglers.forEach(function(el) {
  el.addEventListener('click', function(e) {
    //const content = el.innerHTML;
    //console.log(content);
    el.nextSibling('.folder-content').style.display = 'block';
  })
});

<div class="folder">
  <div class="toggler">Click me 1</div>
  <div class="folder-content" style="display: none">
    Lorem ipsum
  </div>
</div>
<div class="folder">
  <div class="toggler">Click me 2</div>
  <div class="folder-content" style="display: none">
    Lorem ipsum
  </div>
</div>

任何帮助,将不胜感激 :)

Answer 1

nextElement是一个属性,而不是一个函数,所以你不要使用()它.也就是说,使用nextSibling可以为您提供您不想要的空白内容.相反,你可以使用nextElementSibling:

el.nextElementSibling.style.display = 'block';

const togglers = document.querySelectorAll('.toggler');
//console.log(togglers);
togglers.forEach(function(el) {
  el.addEventListener('click', function(e) {
    //const content = el.innerHTML;
    //console.log(content);
    el.nextElementSibling.style.display = 'block';
  })
});

<div class="folder">
  <div class="toggler">Click me 1</div>
  <div class="folder-content" style="display: none">
    Lorem ipsum
  </div>
</div>
<div class="folder">
  <div class="toggler">Click me 2</div>
  <div class="folder-content" style="display: none">
    Lorem ipsum
  </div>
</div>