Question

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

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

我试图制作一个JS小提琴，但是我无法集成我的代码，这是行不通的。小提琴：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链接吗？

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

另一种解决方案是，如果确实需要索引，则在设置新索引之前先搜索具有“活动”类的每个标头。我认为一种更好的方法是在每个触发器上都有一个识别器，您可以使用该识别器来识别相应的元素（例如data-index =“ XX”）

JavaScript手风琴-禁用关闭面板

1 个答案: