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

У меня есть гармошка на основе 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;
}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
232
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

Мне жаль, что в вашей скрипке аккордеон не работает так, как вы описали (все панели могут быть открыты одновременно, и цвет заголовка не остается прежним, если одна из них закрывает панель) Не могли бы вы попытаться уточнить, что такое текущий статус и какова ваша цель? Я только что видел, как вы написали, что не можете включать свой код. Я быстро посмотрю.

Lars-Olof Kreim 27.06.2018 12:14

Если я правильно вас понял, если пользователь нажимает на активный элемент, ничего не должно происходить (решение 1), чтобы получить это, вам просто нужно переместить код в уже существующий if => см. Обновление ответа

Lars-Olof Kreim 27.06.2018 12:25

Он отлично работал, чтобы переместить код в оператор if. Большое спасибо!

the_chimp 27.06.2018 12:37

Другие вопросы по теме