javascript - 无法添加第二个切换类

Question

我想将切换类添加到两个元素 li 和 div，但我只能让它在 div 上工作

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    list.classList.toggle("active");
    var panel = this.nextElementSibling;

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

<ul class="collapsible popout">
    <li class="list">
        <div class="accordion">Section 1</div>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li class="list">
        <div class="accordion">Section 2</div>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
    <li class="list">
        <div class="accordion">Section 3</div>
        <div class="panel">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </li>
</ul>

我似乎无法同时访问 li 类列表和 div Accordion 来切换事件状态，我哪里出错了抱歉，在 javascript 方面不太熟练

Answer 1

使用 this.parentNode.classList.toggle("active"); 而不是 list.classList.toggle("active");

https://jsfiddle.net/nimittshah/t5ubLj40/