JavaScript手风琴-禁用关闭面板

我有一个基于JavaScript和CSS的手风琴。当用户单击一个面板时，它会打开，标题会显示不同的颜色。当用户单击另一个面板时，之前选择的面板将关闭，新面板将打开

我不希望用户能够关闭活动面板。这是因为标题颜色不会更改回去，我也会更改地图上要素的颜色。如果无法禁用，是否有方法访问关闭的面板，以便我可以更改回标题的颜色

我试图做一个JS小提琴，但我不能集成我的代码，这不起作用。小提琴：

这是我的代码：

JavaScript:

var acc = document.getElementsByClassName('accordion');
var panel = document.getElementsByClassName('accordion-panel');

for (var i = 0; i < acc.length; i++) 
{
(function(index){
    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");
        }

        var myIndex = index + 1;
        console.log("INDEX " + myIndex);

        //set the style of the route
        routes.setStyle(style_routes);
        routes.getLayer(myIndex).setStyle(style_routeClicked).bringToFront();

        //zoom to the selected feature
        map.fitBounds(routes.getLayer(myIndex).getBounds(),{padding:[200,200]});

        }
    })(i);
}

function setClass(els, className, fnName){
for (var i=0; i < els.length; i++){
    els[i].classList[fnName](className);
    }
}

---

这个问题有两种不同的解决方案。虽然没有可用的样本很难回答。。。您可以包括一个JSFIDLE链接吗

一个解决方案是您请求的行为（用户无法关闭打开的面板）。要实现这一点，您只需检查单击元素的活动类是否已设置，如果未设置，您将执行您实现的所有其他函数。（将所有内容移动到if（setClasses）{}）

---

另一种解决方案是，在设置新的类之前，只需搜索具有“活动”类的每个头，这样您就可以找到索引，如果您真的需要的话。在我看来，更好的方法是在每个触发器上都有一个识别器，您可以使用它来识别相应的元素（例如，A data index=“XX”）

很抱歉，在您的小提琴中，手风琴不能像您描述的那样工作（所有面板可以同时打开，如果关闭面板，标题的颜色也不会保持不变）你能澄清一下目前的状况吗？你的目标是什么？我刚刚看到你写了你不能包含你的代码。我会快速看一看。如果我理解正确，如果用户单击一个活动元素，则不会发生任何事情（解决方案1），要做到这一点，您只需在已经存在的If=>see answer update中移动代码，将代码移动到If语句中效果非常好。谢谢！

button.accordion {
        margin-left: -10px;
        background-color: white;
        color: #444;
        cursor: pointer;
        padding: 18px;
        height: 100%;
        width: 110%;
        text-align: left;
        border: 0;
        border-bottom: 1px solid;
        outline: none;
        transition: 0.4s;
    }

button.accordion {
    background-color: #f8f8f8;
}

button.accordion:hover {
    background-color: #426334;
    color: white;
}

button.accordion:focus {
    background-color: #426334;
    color: white;
    font-weight: bold;
}

div.accordion-panel {
    padding: 0 0px;
    background-color: none;
    display: none;
}

div.accordion-panel.show {
    display: block !important;
}