如何使用嵌套JavaScript手风琴折叠所有负载

Question

我用JavaScript创建了一个嵌套的手风琴。 在加载时，两个父手风琴是关闭的，但是嵌套的手风琴都是打开的，箭头指向错误的方向。 如何使所有嵌套的手风琴也关闭？

这是代码： https : //jsfiddle.net/mike4323/spfqf1t5/

这是手风琴代码

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

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  }
}

Answer 1

在您的html中，嵌套手风琴<button>的<div>兄弟姐妹没有类panel

用于类的css panel display: none;

基本上，将类panel添加到嵌套手风琴<button>的<div>兄弟姐妹中，或为这些div sa display: none; 默认。