帶有純 javascript 的手風琴 - 擴展組不跟隨

Question

我正在嘗試創建一個手風琴，並且僅在 onclick function 期間按組擴展。 所以當點擊Level 2(1)時，只允許展開Level 3(1)的div。 您可以查看我的代碼片段以獲得更清晰的理解。 目前它僅適用於 2(1) 級。

這是我想要的流程：

單擊主級別 - 顯示所有級別 2

單擊 Level 2(1) - 顯示所有 Level 3(1)（如果有）

單擊 Level 2(2) - 顯示所有 Level 3(2)（如果有）等......

這就是我想要的 output：

 function toggle(item) { item.classList.toggle("active"); let panel = item.nextElementSibling; if (panel.== null) { if (panel.style.display === "block") { panel.style;display = "none". } else { panel.style;display = "block"; } } return false; }

 .accordion, .subpanel-accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; display: flex; }.active, .accordion:hover { background-color: #ccc; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }.text-accordion { display: flex; align-items: center; justify-content: flex-start; flex: 50%; }.button-accordion { display: flex; align-items: center; justify-content: flex-end; flex: 50%; }

 <div class="accordion" id="main-1" onclick="toggle(this);">Level 1</div> <div class="panelaccordion level2"> <div class="accordion" id="sub-1" onclick="toggle(this);"> <div class="text-accordion">Level 2(1)</div> <div class="button-accordion" onclick="getid(\'sub-1\');">Click level 2(1)</div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3(1)</div> <div class="button-accordion" onclick="getidsub(\'subpanel-1\');">Click level 3(1)</div> </div> <div class="accordion" id="sub-2"> <div class="text-accordion">Level 2(2)</div> <div class="button-accordion" onclick="getid(\'sub-2\');">Click level 2(2)</div> </div> <div class="subpanel-accordion" id="subpanel-2"> <div class="text-accordion">Level 3(2)</div> <div class="button-accordion" onclick="getidsub(\'subpanel-2\');">Click level 3(2)</div> </div> <div class="accordion" id="sub-3"> <div class="text-accordion">Level 2(3)</div> <div class="button-accordion" onclick="getid(\'sub-2\');">Click level 2(3)</div> </div> </div>

Answer 1

您可以為手風琴使用 HTML details標簽。 我正在添加一個小示例repl

MDN HTML 詳細信息標簽