Bootstrap手风琴（点击按钮，手风琴的所有其他部分应关闭并隐藏在显示中）答案

【问题标题】：Bootstrap accordion (On click of button, all other parts of accordion should be closed and hidden from display)Bootstrap手风琴（点击按钮，手风琴的所有其他部分应关闭并隐藏在显示中）
【发布时间】：2020-03-12 16:22:42
【问题描述】：

尝试拥有 4 或 5 个主按钮的手风琴，当单击一个时，其他按钮应该消失，以便单击的按钮应该是唯一显示的按钮。当最小化时，其他人应该重新出现以再次显示整个手风琴。

我在想像这样的某种切换（我在网站的另一部分有）可能适用吗？除了我应该隐藏多个手风琴按钮，而不仅仅是在隐藏/显示两个部分之间切换：

        function myFunction() 
        {
            var x = document.getElementById("text");
            var y = document.getElementById("text2");
            if (x.style.display === "none")
            {
                x.style.display = "block";
                y.style.display = "none";
            } else {
                x.style.display = "none";
                y.style.display = "block";
            }
        }

这是我目前拥有的代码，其脚本目前只是确保一次只显示一个手风琴面板：

<style>
p.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 14px;
width: 60%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
margin-bottom:10px;
margin: auto;
}
p.accordion.active, p.accordion:hover {
background-color: #ddd;
}
p.accordion:after {
content: '\2795'; 
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
p.accordion.active:after {
content: "\2796"; 
}
/* Style the element that is used for the panel class */
div.panel {
background-color: white;
max-height: 0;
width: 60%;
text-align: left;
overflow: hidden;
transition: 0.4s ease-in-out;
opacity: 0;
margin-bottom:10px;
margin: auto;
}
div.panel.show {
padding: 10pt;
opacity: 1;
max-height: 500px;
border: none;
}
</style>

<p class="accordion">PanelOne</p>
      <div class="panel">
        Lorem Ipsum
      </div>

<p class="accordion">PanelTwo</p>
      <div class="panel">
        Lorem Ipsum II
      </div>

<p class="accordion">PanelThree</p>
      <div class="panel">
        Lorem Ipsum III
      </div>

                <script>
                    document.addEventListener("DOMContentLoaded", function(event)
                    { 
                    var acc = document.getElementsByClassName("accordion");
                    var panel = document.getElementsByClassName('panel');
                    for (var i = 0; i < acc.length; i++) 
                    {
                        acc[i].onclick = function() 
                        {
                        var setClasses = !this.classList.contains('active');
                        setClass(acc, 'active', 'remove');
                        setClass(panel, 'show', 'remove');
                        if (setClasses) 
                        {
                            this.classList.toggle("active");
                            this.nextElementSibling.classList.toggle("show");
                        }
                        }
                    }
                    function setClass(els, className, fnName) 
                    {
                        for (var i = 0; i < els.length; i++) 
                        {
                        els[i].classList[fnName](className);
                        }
                    }
                    });
                </script>

任何提示/修复将不胜感激！

【问题讨论】：

标签： accordion panel jquery-ui-accordion bootstrap-accordion

【解决方案1】：

许多可能的解决方案之一：

<script>
    document.addEventListener("DOMContentLoaded", function(event) { 
        var acc = document.getElementsByClassName("accordion");
        var panel = document.getElementsByClassName('panel');
        for (let i = 0; i < acc.length; i += 1) {
            acc[i].onclick = function () {
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
                for (let j = 0; j < acc.length; j += 1) {
                    if (i !== j) {
                        acc[j].style.display = acc[j].style.display === 'none' ? 'block' : 'none';
                    }
                }
            }
        }
    });
</script>

【讨论】：