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

由于您正在使用引导程序，因此您可能希望使用他们的手风琴：

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

它完全符合您的要求。

当另一个手风琴打开时，如何让手风琴折叠？

1 个答案: