javascript - HTML两级 Accordion 菜单隐藏且不添加内容

Question

我正在尝试做一个两级 Accordion 菜单。第一级工作正常，但当我添加第二级时，第二级内容隐藏在第一级第 2 节标题中。有人知道我该如何解决这个问题吗？

我的html代码是这样的:

<div class="container-wrapper"></div>
    <button class="accordion"><p class="title-sections">Provisioning</p></button>
    <div class="panel">
        <button class="sub-accordion">Set Variables</button>
        <div class="sub-panel">
            <p>Lorem ipsum...</p>
        </div>
        <button class="sub-accordion">Get Variables</button>
        <div class="sub-panel">
            <p>Lorem ipsum...</p>
         </div>
         <button class="sub-accordion">Reset</button>
         <div class="sub-panel">
             <p>Lorem ipsum...</p>
         </div>
         <button class="sub-accordion">Get Base Report</button>
         <div class="sub-panel">
             <p>Lorem ipsum...</p>
         </div>
         </div>
    
     <button class="accordion"><p class="title-sections">Availability</p></button>
     <div class="panel">
         <p>Lorem ipsum...</p>
     </div>

我的CSS:

.accordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    .sub-accordion {
        background-color: rgb(181, 255, 191);
        color: #444;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: center;
        border: none;
        outline: none;
        transition: 0.4s;
    }

    .active, .accordion:hover {
       background-color: #ccc;
    }

    .sub-active, .sub-accordion:hover {
        background-color: rgb(104, 255, 124);;
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }

    .sub-panel {
        padding: 0 18px;
        background-color: lightblue;
        max-height: 0;
        overflow: hidden;
        transform: max-height 0.2s ease-out;
    }

    .container-wrapper {
        padding: 20pt;
    }

    .title-sections {
        font-size: 20px;
    }

最后是我的 JS，问题就在这里。我复制粘贴了第一级 Accordion 的相同代码来制作第二级 Accordion ，高度有问题，但我不太知道需要更改哪一部分:

var acc = document.getElementsByClassName("accordion");
var i;
var sub_acc = document.getElementsByClassName("sub-accordion");
var j;


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";
    }
  });
}

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

Answer 1

这是 Javascript 中的修复。解决方案只是寻找事件的 Accordion 并在子 Accordion 点击逻辑中再次设置其最大高度

const activeAccordion = document.getElementsByClassName("accordion active")[0]
var panel = activeAccordion.nextElementSibling;
panel.style.maxHeight = panel.scrollHeight + "px";

与您的 Javascript 完全集成

var acc = document.getElementsByClassName("accordion");
var i;
var sub_acc = document.getElementsByClassName("sub-accordion");
var j;


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";
    }
  });
}

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

    //The change is here
    const activeAccordion = document.getElementsByClassName("accordion active")[0]
    var panel = activeAccordion.nextElementSibling;
    panel.style.maxHeight = panel.scrollHeight + "px";
  });
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.sub-accordion {
  background-color: rgb(181, 255, 191);
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.sub-active,
.sub-accordion:hover {
  background-color: rgb(104, 255, 124);
  ;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.sub-panel {
  padding: 0 18px;
  background-color: lightblue;
  max-height: 0;
  overflow: hidden;
  transform: max-height 0.2s ease-out;
}

.container-wrapper {
  padding: 20pt;
}

.title-sections {
  font-size: 20px;
}

<div class="container-wrapper"></div>
<button class="accordion"><p class="title-sections">Provisioning</p></button>
<div class="panel">
  <button class="sub-accordion">Set Variables</button>
  <div class="sub-panel">
    <p>Lorem ipsum...</p>
  </div>
  <button class="sub-accordion">Get Variables</button>
  <div class="sub-panel">
    <p>Lorem ipsum...</p>
  </div>
  <button class="sub-accordion">Reset</button>
  <div class="sub-panel">
    <p>Lorem ipsum...</p>
  </div>
  <button class="sub-accordion">Get Base Report</button>
  <div class="sub-panel">
    <p>Lorem ipsum...</p>
  </div>
</div>

<button class="accordion"><p class="title-sections">Availability</p></button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>