时间戳

首页 > 解决方案 > 替代 nextElementSibling

javascript - 替代 nextElementSibling

问题描述

我目前有一个代码，当单击 div 时，它会使用nextElementSibling.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    console.log(panel)
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
<div class="accordion">
  <p>Resources</p>
</div>
<div class=panel ">
 Test message
</div>

这会使用 class 向 div 添加样式panel。我需要将类移动accordion到p标签而不是div

像这样：

<div>
  <p class="accordion">Resources</p> 
</div>
<div class= panel">
  Test message
</div>

现在我如何定位面板，accordion不再是旁边的panel？

标签： javascripthtmljquerycss

解决方案

由于pis now child 的divwhich 是 的兄弟.panel，因此您可以parentElement在使用 之前返回到 DOM 的该级别nextElementSibling，如下所示：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.parentElement.nextElementSibling;
    
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
.panel { display: none; }
.active { color: #C00; }
<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

另请注意，如果您不需要支持 IE，您可以使用更现代的方法更简洁地实现相同的 JS 逻辑：

document.querySelectorAll('.accordion').forEach(el => {
  el.addEventListener('click', e => {
    let accordion = e.target;
    accordion.classList.toggle('active');
    accordion.parentElement.nextElementSibling.classList.toggle('show');
  });
});
.panel { display: none; }
.panel.show { display: block; }
.active { color: #C00; }
<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

<div><p class="accordion">Resources</p></div>
<div class="panel">Test message</div>

推荐阅读