折叠式不工作 Javascript （无法读取属性）

Question

 我有一个简单的手风琴， 我想显示/隐藏来自 div 的点击内容.到目前为止，我实现了我的代码添加活动类并且运行良好，问题在于这个类。控制台给我一个错误，showUncaught TypeError: Cannot read property 'classList' of null

这是我的代码

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

var panel = document.getElementsByClassName('panel');

for (var i = 0; i < acc.length; i++) {

  acc[i].onclick = function() {

    var setClasses = !this.classList.contains('active');

    setClass(acc, 'active', 'remove');

    setClass(panel, 'show', 'remove');

    if (setClasses) {

      this.classList.toggle("active");

      this.nextElementSibling.classList.toggle("show", 800);

    }

  }

}

function setClass(els, className, fnName) {

  for (var i = 0; i < els.length; i++) {

    els[i].classList[fnName](className);

  }

}

  div.panel {

  display: none;

  transition: 4.6 ease-in-out;

  overflow: hidden;

}

div.panel.show {

  display: block !important;

<p><button class="accordion">▼ Title 1</button></p>

<div class="panel">

  <ul>

    <li>

      Title

      <ul>

        <li>Lorem</li>

        <li>aaaaa</li>

      </ul>

  </ul>

</div>

<p><button class="accordion">▼ Title 2</button></p>

<div class="panel">

  <ul>

    <li>

      Title

      <ul>

        <li>Lorem 1</li>

        <li>aaaaa</li>

      </ul>

  </ul>

</div>

有人可以尝试帮助我吗？谢谢大家

Answer 1

您的问题是，您正在元素内部的按钮上查找，因此旁边没有任何同级按钮：this.nextElementSibling<p>按钮是他父母里面的一个孤独的孩子，所以没有兄弟姐妹。<p>你有你的代码的方式，容易的事情是寻找兄弟姐妹，所以：<p>var acc = document.getElementsByClassName("accordion");var panel = document.getElementsByClassName('panel');for (var i = 0; i < acc.length; i++) {&nbsp; acc[i].onclick = function() {&nbsp; &nbsp; var setClasses = !this.classList.contains('active');&nbsp; &nbsp; setClass(acc, 'active', 'remove');&nbsp; &nbsp; setClass(panel, 'show', 'remove');&nbsp; &nbsp; if (setClasses) {&nbsp; &nbsp; &nbsp; this.classList.toggle("active");&nbsp; &nbsp; &nbsp; this.parentNode.nextElementSibling.classList.toggle("show", 800); // nextElementSibling of the parentNode.&nbsp; &nbsp; }&nbsp; }}function setClass(els, className, fnName) {&nbsp; for (var i = 0; i < els.length; i++) {&nbsp; &nbsp; els[i].classList[fnName](className);&nbsp; }}&nbsp; div.panel {&nbsp; display: none;&nbsp; transition: 4.6 ease-in-out;&nbsp; overflow: hidden;}div.panel.show {&nbsp; display: block !important;<p><button class="accordion">▼ Title 1</button></p><div class="panel">&nbsp; <ul>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; Title&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>Lorem</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>aaaaa</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; </ul></div><p><button class="accordion">▼ Title 2</button></p><div class="panel">&nbsp; <ul>&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; Title&nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>Lorem 1</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>aaaaa</li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; </ul></div>

Answer 2

您的代码有效！仅更改 HTML，如下所示：<div>&nbsp; &nbsp; <button class="accordion">▼ Title 1</button>&nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Lorem</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>aaaaa</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div></div><div>&nbsp; &nbsp; <button class="accordion">▼ Title 2</button>&nbsp; &nbsp; <div class="panel">&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Title&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Lorem 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>aaaaa</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </div></div>