У меня есть гармошка на основе 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.info("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;
}



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


На этот вопрос есть два разных решения. Хотя довольно сложно ответить без пригодного для использования образца ... не могли бы вы включить ссылку jsfiddle?
Одним из решений может быть запрошенное вами поведение (пользователь не может закрыть открытую панель). Чтобы добиться этого, вы можете просто проверить, установлен ли уже активный класс элемента, по которому щелкнули мышью, и только в этом случае вы выполните все другие реализованные вами функции. (Переместите все в свой if (setClasses) {})
Другим решением было бы просто искать каждый заголовок, имеющий «активный» класс, прежде чем устанавливать новый, таким образом, вы можете найти индекс, если он вам действительно нужен. На мой взгляд, лучшим способом было бы иметь идентификатор для каждого триггера, который вы можете использовать для идентификации соответствующих элементов (например, data-index = "XX").
Если я правильно вас понял, если пользователь нажимает на активный элемент, ничего не должно происходить (решение 1), чтобы получить это, вам просто нужно переместить код в уже существующий if => см. Обновление ответа
Он отлично работал, чтобы переместить код в оператор if. Большое спасибо!
Мне жаль, что в вашей скрипке аккордеон не работает так, как вы описали (все панели могут быть открыты одновременно, и цвет заголовка не остается прежним, если одна из них закрывает панель) Не могли бы вы попытаться уточнить, что такое текущий статус и какова ваша цель? Я только что видел, как вы написали, что не можете включать свой код. Я быстро посмотрю.