@Serdev21
Middle Front-end developer

Как починить аккордеоны на мобильном экране при смене ориентации в которой они не должны работать и возврата обратно на мобильный экран?

Здравствуйте, есть такая проблема вот мой скрипт аккордеона
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 то код перестает работать корректно, клики отрабатывают но само переключение аккордеона перестает работать пока не перезагрузить страницу. Прошу подсказать возможную ошибку в коде
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 1
@Steppp
сделай addEventListener('resize', и обнови enquire.register

Чтоб обновить, засунь их в функцию, и запускай функцию при старте и при ресайзе)
По идеи должно помочь)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы