HTML兩級手風琴選單隱藏而不添加內容

我正在嘗試做一個兩級手風琴選單。第一級作業正常，但是當我添加第二級時，第二級內容隱藏在第一級第 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，這就是問題所在。我復制粘貼了一級手風琴的相同代碼來制作二級手風琴，高度有問題，但我不太清楚需要更改哪個部分：

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

uj5u.com熱心網友回復：

這是Javascript中的修復。解決方案只是尋找活動手風琴并在子手風琴點擊邏輯中再次設定其最大高度

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>

uj5u.com熱心網友回復：

對于您的 HTML，您需要將整個內容包裝在 container-wrapper 中，這是它的代碼：

<div class="container-wrapper">
  <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>
</div>

和你的CSS：

.container-wrapper {
  padding: 20pt;
  //add these two lines
  display: flex; 
  flex-direction: column;
}

標籤：javascript html css 手风琴

上一篇：回應式布局解決方案

下一篇：如何在左側設定復選框的標簽？