當另一個手風琴打開時，如何讓手風琴折疊？

Question

我希望其他手風琴在打開時關閉。 我嘗試使用帶有引導程序的數據切換，但它沒有幫助。 這是我在Github上的完整源代碼。

<button class="accordion">Bedroom & Living Room</button>
                <div class="panel">
                    <p>Wipe down tables and chairs.<br>
                    Removing dirt from carpets using high-powered vacuums.<br>
                    Removing garbage and debris.</p>
                </div> <br>
                <button class="accordion">Bathroom & Kitchen</button>
                <div class="panel">
                    <p>Wash Dishes<br>
                    Clean counters<br>
                    Stove</p>
                </div> <br>
                <button class="accordion">Extra Services</button>
                <div class="panel">
                    <p>Polished furniture.<br>
                    Dusting window sills and desk.<br>
                    Proper removal of dust and careful treatment to blinds and mini blinds.</p>
                </div> 



<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
            panel.style.display = "none";
        } else {
            panel.style.display = "block";
        }
    }
}
</script>

正如我所說，數據切換不起作用。 如果我做錯了，請告訴我。 您可以嘗試在我的git hub中編輯它，並告訴我它是否有效。

<div id="accordion">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><button class="accordion">Bedroom & Living Room</button></a>
            <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel">
                <p>Wipe down tables and chairs.<br>
                Removing dirt from carpets using high-powered vacuums.<br>
                Removing garbage and debris.</p>
            </div>
            </div>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"><button class="accordion">Bathroom & Kitchen</button></a>
            <div id="collapse2" class="panel-collapse collapse in">
            <div class="panel">
                <p>Wash Dishes<br>
                Clean counters<br>
                Stove</p>
            </div>
            </div>
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"><button class="accordion">Extra Services</button></a>
            <div id="collapse3" class="panel-collapse collapse in">
            <div class="panel">
                <p>Polished furniture.<br>
                Dusting window sills and desk.<br>
                Proper removal of dust and careful treatment to blinds and mini blinds.</p>
            </div>
            </div>  
            </div>

Answer 1

既然你正在使用bootstrap，你可能想看看他們使用他們的手風琴：

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

它完全符合您的要求。