帶有純 javascript 的手風琴 - 僅適用於雙擊

Question

我想通過使用手風琴方法在 onclick 事件（純 javascript ）上擴展 div，因為它具有多個級別，但它僅適用於雙擊。 我希望它在 function 而不是 javascript 加載。

提前感謝您提供的任何幫助！

 function togglediv(){ let acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); let panel=this.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; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

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

Answer 1

您不需要onclick="togglediv()因為您已經添加了事件偵聽器，因此您可以簡單地刪除togglediv()並添加事件偵聽器，如下所示：

 let acc = document.getElementsByClassName("accordion"); for (var i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); let panel = this.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; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <div class="accordion" id="main-1">Level 1</div> <div class="panelaccordion level2"> <div class="accordion" id="sub-1"> <div class="text-accordion">Level 2</div> <div class="button-accordion" onclick="getid('sub-1');"> Click level 2 </div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3</div> <div class="button-accordion" onclick="getidsub('subpanel-1');"> Click level 3 </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>

Answer 2

如果你想要一個 function 那么你不需要addEventListener因為它已經添加了onlick事件

 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; }.panelaccordion { padding: 0 18px; display: none; background-color: white; overflow: hidden; }

 <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</div> <div class="button-accordion" onclick="getid('sub-1');">Click level 2</div> </div> <div class="subpanel-accordion" id="subpanel-1"> <div class="text-accordion">Level 3</div> <div class="button-accordion" onclick="getidsub('subpanel-1');">Click level 3</div> </div> <div class="accordion" id="sub-2" onclick="toggle(this);"> <div class="text-accordion">Level 2(2)</div> <div class="button-accordion" onclick="getid('sub-2');">Click level 2(2)</div> </div> </div>