手风琴之内的手风琴

Question

我正在尝试将手风琴放入手风琴中。但是第二个手风琴工作不正常。第一个中的手风琴根本不起作用。任何帮助将不胜感激:)我的问题主要是代码，因此我在输入内容以查看是否刚刚编写的多余空间对任何事情都有所帮助。

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

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  });
}

.accordion {
    background-color: rgb(219, 219, 219);
    color: rgb(15, 15, 15);
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    font-weight: 700;
    margin-top: 10px;
  }
  
  .active, .accordion:hover {
    background-color: rgb(185, 185, 185);
  }
  
  .accordion:after {
    content: '\002B';
    color: rgb(32, 32, 32);
    font-weight: bold;
    float: right;
    margin-left: 5px;
  }
  
  .active:after {
    content: "\2212";
  }
  
  .panel {
    font-family: 'Titillium Web', sans-serif;
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
  }

<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
  <button class="accordion">Section 1</button>
  <div class="panel">
    <p>
      content
    </p>
  </div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Answer 1

您的手风琴在父手风琴中工作正常。只是我们不能看到它正在工作，原因是，当您扩展儿童手风琴时，您还应该考虑将panel.style.maxHeight重新分配给父手风琴aslo。

现在，您将panel.style.maxHeight设置为被单击的手风琴的面板，但是父级手风琴不知道其子级已展开。因此，当子手风琴展开时，您将不得不panel.style.maxHeight重新分配给父手风琴面板。

尝试重构代码，让我知道您的进度。