Здравствуйте, есть такая проблема вот мой скрипт аккордеона
import enquire from 'enquire-js';
function triggerAccordeon() {
const faqsElement = document.querySelectorAll('.tab-trigger');
const mobileAccordeon = () => {
function calculateOffsetTop() {
for (let i = 0; i < faqsElement.length; i++) {
faqsElement[i].dataset.offset = faqsElement[i].getBoundingClientRect().top + window.scrollY - 50;
}
}
calculateOffsetTop();
let description = document.querySelectorAll('.tabs--mobile');
description.forEach((item) => {
const firstTab = item.querySelector('.tab-first .details-width');
item.querySelector('.tab-first').style.maxHeight = firstTab.offsetHeight + "px";
});
for (let i = 0; i < faqsElement.length; i++) {
faqsElement[i].addEventListener('click', function () {
accordionClick(event.target);
}, {
passive: false
});
}
const accordionClick = (eventHappened) => {
const targetClicked = event.currentTarget;
let classClicked = targetClicked.classList;
while ((classClicked[1] != "tab-trigger")) {
targetClicked = targetClicked.parentElement;
classClicked = targetClicked.classList;
}
let description = targetClicked.nextElementSibling;
let expander = targetClicked.children[0];
if (description.style.maxHeight) {
description.style.maxHeight = null;
targetClicked.classList.remove('active');
} else {
const tabs = document.querySelectorAll('.tab-content');
for (let i = 0; i < tabs.length; i++) {
if (tabs[i].style.maxHeight) {
tabs[i].style.maxHeight = null;
tabs[i].previousElementSibling.classList.remove('active');
}
}
description.style.maxHeight = description.scrollHeight + "px";
console.log(description);
targetClicked.classList.add('active');
let topPosisitionTrigger = targetClicked.dataset.offset;
setTimeout(function () {
window.scrollTo({
top: topPosisitionTrigger,
behavior: "smooth"
});
}, 200);
}
}
}
const desktopAccordeon = () => {
faqsElement.forEach(function (trigger) {
trigger.addEventListener('click', function () {
const id = this.getAttribute('data-tab'),
content = document.querySelector('.tab-content[data-tab="' + id + '"]'),
activeTrigger = document.querySelector('.tab-trigger.active'),
activeContent = document.querySelector('.tab-content.active');
if (activeTrigger) {
activeTrigger.classList.remove('active');
}
trigger.classList.add('active');
if (activeContent) {
activeContent.classList.remove('active');
}
content.classList.add('active');
// window.location = this.getAttribute('href');
}, {
passive: false
});
});
}
enquire.register('screen and (min-width: 768px)', {
match: function () {
desktopAccordeon();
},
unmatch: function () {
mobileAccordeon();
},
});
enquire.register('screen and (max-width: 767px)', {
match: function () {
mobileAccordeon();
},
unmatch: function () {
desktopAccordeon();
},
});
}
export default triggerAccordeon;
сам код успешно работает на экране ниже 767px как и указано в медиа запросе но если сменить ширину экрану то есть перевернуть телефон горизонтальное положение когда код уже не должен работать и затем вернуть его обратно на ширину меньше 767 то код перестает работать корректно, клики отрабатывают но само переключение аккордеона перестает работать пока не перезагрузить страницу. Прошу подсказать возможную ошибку в коде
Простой
