javascript - 使用纯js获取具有特定类的单击元素的下一个元素

Question

我试图通过以下方式获取具有特定类的第一个元素，该类遵循使用纯 JS(无 JQuery)单击的元素，但 get el.nextSibling 不是函数错误。最初我使用的是 JQueryparents().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>