手風琴面板額外擴展

Question

我們的網站使用帶有可折疊面板的手風琴。 在其中一個手風琴面板中，有幾個復選框可以選中或取消選中。 復選框 1 - 如果選中 - 顯示另一組兩個復選框，但顯示隱藏復選框時手風琴面板不會展開。

當新的復選框出現時，如何使手風琴面板也展開？

正在使用以下 HTML + CSS + JS。

 // Accordion panels var acc = document.getElementsByClassName("troubleshooter-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"; } }); } // Hide checkboxes function showextra() { var checkBox = document.getElementById("check1a"); var extra = document.getElementById("checkbox1a-extra"); if (checkBox.checked == true){ extra.style.display = "block"; } else { extra.style.display = "none"; } }

 .troubleshooter-accordion { background-color: rgba(0,175,75,1.00); border: 1px solid rgba(0,175,75,1.00); color: rgba(255,255,255,1.00); padding: 16px; cursor: pointer; width: 100%; text-align: center; outline: none; font-size: 1.15em; transition: 0.4s; margin-top: 2px; border-radius: 8px; }.active, .troubleshooter-accordion:hover { background-color: rgba(255,255,255,1.00); border: 1px solid rgba(0,145,255,1.00); color: rgba(0,145,255,1.00); }.troubleshooter-panel { padding: 0 16px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-radius: 8px; }.troubleshooter-panel h4 { margin: 16px 0 }.infobox { border: 2px solid rgba(0,175,75,1.00); border-radius: 8px; margin-top: 16px; padding: 24px 16px; }.checkbox-extra { display: none; margin-left: 24px; }

 <button class="troubleshooter-accordion">Accordion</button> <div class="troubleshooter-panel"> <h4 align="center">Check the boxes below</h4> <hr> <p> <label><input type="checkbox" id="check1a" name="check1a" value="check1a" class="check1a" onclick="showextra()">&nbsp; Checkbox 1</label> <div class="checkbox-extra" id="checkbox1a-extra"> <p> <label><input type="checkbox" id="check1a1" name="check1a1" value="check1a1" class="check1a1">&nbsp; Checkbox 1-A</label><br> <label><input type="checkbox" id="check1a2" name="check1a2" value="check1a2" class="check1a2">&nbsp; Checkbox 1-B</label> </p> </div> <hr> </p> <p> <label><input type="checkbox" id="check1b" name="check1b" value="check1b" class="check1b">&nbsp; Checkbox 2</label> </p> <hr> </div>

Answer 1

當您第一次展開手風琴時，您通過以下方式設置它的最大高度值：

panel.style.maxHeight = panel.scrollHeight + "px";

當您第二次展開手風琴時，這當然應該再次發生，否則最大高度保持不變。

要解決此問題，您只需從復選框中查找父面板並再次設置最大高度：

 var panel = checkBox.closest('.troubleshooter-panel');
 panel.style.maxHeight = panel.scrollHeight + "px";

完整代碼：

 // Accordion panels var acc = document.getElementsByClassName("troubleshooter-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"; } }); } // Hide checkboxes function showextra() { var checkBox = document.getElementById("check1a"); var extra = document.getElementById("checkbox1a-extra"); if (checkBox.checked == true){ extra.style.display = "block"; var panel = checkBox.closest('.troubleshooter-panel'); panel.style.maxHeight = panel.scrollHeight + "px"; } else { extra.style.display = "none"; var panel = checkBox.closest('.troubleshooter-panel'); panel.style.maxHeight = panel.scrollHeight + "px"; } }

 .troubleshooter-accordion { background-color: rgba(0,175,75,1.00); border: 1px solid rgba(0,175,75,1.00); color: rgba(255,255,255,1.00); padding: 16px; cursor: pointer; width: 100%; text-align: center; outline: none; font-size: 1.15em; transition: 0.4s; margin-top: 2px; border-radius: 8px; }.active, .troubleshooter-accordion:hover { background-color: rgba(255,255,255,1.00); border: 1px solid rgba(0,145,255,1.00); color: rgba(0,145,255,1.00); }.troubleshooter-panel { padding: 0 16px; background-color: white; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; border-radius: 8px; }.troubleshooter-panel h4 { margin: 16px 0 }.infobox { border: 2px solid rgba(0,175,75,1.00); border-radius: 8px; margin-top: 16px; padding: 24px 16px; }.checkbox-extra { display: none; margin-left: 24px; }

 <button class="troubleshooter-accordion">Accordion</button> <div class="troubleshooter-panel"> <h4 align="center">Check the boxes below</h4> <hr> <p> <label><input type="checkbox" id="check1a" name="check1a" value="check1a" class="check1a" onclick="showextra()">&nbsp; Checkbox 1</label> <div class="checkbox-extra" id="checkbox1a-extra"> <p> <label><input type="checkbox" id="check1a1" name="check1a1" value="check1a1" class="check1a1">&nbsp; Checkbox 1-A</label><br> <label><input type="checkbox" id="check1a2" name="check1a2" value="check1a2" class="check1a2">&nbsp; Checkbox 1-B</label> </p> </div> <hr> </p> <p> <label><input type="checkbox" id="check1b" name="check1b" value="check1b" class="check1b">&nbsp; Checkbox 2</label> </p> <hr> </div>