折叠式不工作 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++) {

  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.parentNode.nextElementSibling.classList.toggle("show", 800); // nextElementSibling of the parentNode.

    }

  }

}

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 2

您的代码有效！仅更改 HTML，如下所示：

<div>

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

    <div class="panel">

        <ul>

            <li>

                Title

                <ul>

                    <li>Lorem</li>

                    <li>aaaaa</li>

                </ul>

        </ul>

    </div>

</div>

<div>

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

    <div class="panel">

        <ul>

            <li>

                Title

                <ul>

                    <li>Lorem 1</li>

                    <li>aaaaa</li>

                </ul>

        </ul>

    </div>

</div>