如何使用嵌套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; 默認。