JavaScript 手风琴 - 禁止关闭面板

Question

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

我不希望用户能够关闭活动面板。这是因为 header 颜色没有变回来，我也改变了地图上特征的颜色。如果它不能被禁用，有没有办法访问关闭的面板，这样我就可以改回 header?

的颜色

我尝试制作一个 JS fiddle，但我无法集成我的代码，这不起作用。 fiddle: https://jsfiddle.net/s0y639ra/6/

这是我的代码：

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);
    }
}

CSS:

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;
}

Answer 1

这个问题有两种不同的解决方案。虽然没有可用的样本很难回答......你能包括一个 jsfiddle link?

一种解决方案是您请求的行为（用户无法关闭打开的面板）。要实现这一点，您只需检查点击元素的活动 class 是否已经设置，只有在没有设置的情况下，您才会执行您实现的所有其他功能。（将所有内容移至您的 if(setClasses){}）

另一种解决方案是在设置新索引之前搜索每个具有 "active" class 的 header，这样您就可以找到索引，如果您确实需要它.我认为更好的方法是在每个触发器上都有一个标识符，您可以使用它来标识相应的元素（例如 data-index="XX"）

JavaScript 手风琴 - 禁止关闭面板

JavaScript Accordion - Disable closing the panel

javascript

css

accordion

leaflet