无法添加第二个切换类答案

【问题标题】：cant add a second toggle class无法添加第二个切换类
【发布时间】：2018-09-18 14:03:42
【问题描述】：

我想将切换类添加到 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 手风琴切换到活动状态，我哪里出错了抱歉，在 javascript 方面不是很熟练

【问题讨论】：

Cannot read property 'toggle' of undefined",
很可能是stackoverflow.com/questions/10693845/…的骗子
试图在两个元素上都设置类不是一个好的设计。仅在手风琴元素本身上设置活动类。如果你想改变其他相关元素的外观，有 css 规则可以根据直接子元素的类来区分。

标签： javascript html

【解决方案1】：

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

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

【讨论】：