如何在第二次點擊時關閉手風琴？ （僅限css和JS）

Question

我有一個簡單的手風琴，當點擊一個新的時，會關閉當前的面板。 這就像我想要的那樣。

但是，我希望能夠通過再次單擊來關閉當前打開的面板。 我需要在代碼中添加什么來做到這一點？

沒有jQuery請:)

 var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { var elems = document.getElementsByClassName("accordion"); for(var it of elems) { it.classList.remove("expanded"); it.nextElementSibling.style.maxHeight = null; } this.classList.toggle("expanded"); var panel = this.nextElementSibling; if (panel.style.maxHeight){ panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); } 

 .accordion:after { content: '\\002B'; } .expanded:after { content: "\\2212"; } .panel { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <button class="accordion"></button> <div class="panel"> Text 1 </div> <button class="accordion"></button> <div class="panel"> Text 2 </div> <button class="accordion"></button> <div class="panel"> Text 3 </div> <button class="accordion"></button> <div class="panel"> Text 4 </div> 

Answer 1

請試試這個：

var acc = document.getElementsByClassName("accordion");
        var i;      
        for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
        var elems = document.getElementsByClassName("accordion");
        var setClasses = !this.classList.contains('expanded');
        for(var it of elems) {
            console.log(it);
          it.classList.remove("expanded");
          it.nextElementSibling.style.maxHeight = null;
        }       
        if (setClasses) {
            this.classList.toggle("expanded");
            var panel = this.nextElementSibling;
            panel.style.maxHeight = panel.scrollHeight + "px";
        }       
        });

        }

Answer 2

這是一個非常短的實現，減少代碼量將使您更好地監督您的代碼。

 var acc = document.getElementsByClassName("accordion"); function toggle (el) { let nextElement = el.nextElementSibling; nextElement.className === 'panel' ? nextElement.className = '' : nextElement.className = 'panel'; } 

 .accordion:after { content: '\\002B'; } .expanded:after { content: "\\2212"; } .panel { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } 

 <button onclick="toggle(this)" class="accordion"></button> <div class="panel"> Text 1 </div> <button onclick="toggle(this)" class="accordion"></button> <div class="panel"> Text 2 </div> <button onclick="toggle(this)" class="accordion"></button> <div class="panel"> Text 3 </div> <button onclick="toggle(this)" class="accordion"></button> <div class="panel"> Text 4 </div>