JavaScript Accordion - отключить закрытие панели - PullRequest
Новая
       6

JavaScript Accordion - отключить закрытие панели

0 голосов
/ 27 июня 2018

У меня есть аккордеон на основе 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;
}

1 Ответ

0 голосов
/ 27 июня 2018

Есть два разных решения этого вопроса. Хотя довольно сложно ответить без примера, пригодного для использования ... не могли бы вы включить ссылку jsfiddle?

Одним из решений будет ваше запрошенное поведение (пользователь не может закрыть открытую панель). Чтобы достичь этого, вы можете просто проверить, установлен ли активный класс элемента, по которому щелкнули, и только в этом случае вы будете выполнять все другие функции, которые вы реализовали. (Переместите все на ваш if (setClasses) {})

Другим решением было бы просто найти каждый заголовок, имеющий «активный» класс, прежде чем устанавливать новый таким образом, чтобы вы могли найти индекс, если он вам действительно нужен. На мой взгляд, лучшим способом было бы иметь идентификатор для каждого триггера, который вы можете использовать для идентификации соответствующих элементов (например, data-index = "XX")

...