javascript - Accordion 中的 Accordion

Question

我正在尝试将 Accordion 放在 Accordion 中。但是第二个 Accordion 不能正常工作。第一个中的 Accordion 根本不起作用。任何帮助将不胜感激 :) 我的问题主要是代码，所以我将其输入以查看刚刚写入的额外空间是否对任何事情有帮助。

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

好吧，您在父级 Accordion 中的 Accordion 正在按预期工作。只是我们看不到它在工作，原因是，当您展开子 Accordion 时，您还应该考虑将 panel.style.maxHeight 重新分配给父 Accordion 。

现在，您将 panel.style.maxHeight 设置为被点击的 Accordion 面板，但父 Accordion 不知道其子 Accordion 已展开。因此，当子 Accordion 展开时，您必须将 panel.style.maxHeight 重新分配给父 Accordion 面板。

尝试重构代码，让我知道你的进展。