Блог

Главная - Вопросы по программированию - Как пересчитать элементы максимальной высоты при изменении размера?

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

#javascript

Вопрос:

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

Я создал функцию «accordionHeight», которая работает при нажатии, но я не могу передать «элемент» этой функции для повторного вычисления вне моего события щелчка.

Потому что высота, очевидно, изменится только по щелчку мыши. Но я хочу, чтобы он пересчитал при вращении текущего открытого «ящика__», но это выходит за рамки.

У меня есть реальный пример на Codepen вместо кода.

Мой JS:

 (() => {
    const accordion = document.querySelector('[bke-data="accordion"]');

    if (!accordion) {
        return;
    }

    const items = accordion.querySelectorAll('.accordion__item');

    const accordionHeight = (element, elementHeight) => {
        element.style.setProperty(`--max-height`, `${elementHeight}px`);
    };

    const toggleAccordion = (item) => {
        const itemBox = item.querySelector('.accordion__box');
        const itemBoxHeight = itemBox.scrollHeight;
        const openItems = accordion.querySelectorAll('.open');
        const itemsLength = openItems.length;
        const currentItem = item;

        // itemBox.style.setProperty(`--max-height`, `${itemBoxHeight}px`);

        accordionHeight(itemBox, itemBoxHeight);

        if (itemsLength) {
            openItems.forEach((item) => {
                item !== currentItem amp;amp; item.classList.remove('open');
            });
        }

        item.classList.toggle('open');
    };

    items.forEach((item) => {
        item.addEventListener('click', () => toggleAccordion(item));
    });

    window.addEventListener('resize', accordionHeight);
})();

Кодовый набор полный код пример: https://codepen.io/Merdzanovich/pen/MWvaryG

Ответ №1:

Пожалуйста, смотрите ниже пример обработки событий изменения размера. Примечание: Запустите фрагмент в режиме полной страницы

 <!DOCTYPE html>
<html>
<body onresize="myFunction()">

<p>Try to resize the browser window to display the windows height and width.</p>

<p id="demo"></p>

<p><strong>Note:</strong> this example will not work properly in IE8 and earlier. IE8 and earlier do not support the outerWidth/outerHeight propery of the window object.</p>

<script>
function myFunction() {
  var w = window.outerWidth;
  var h = window.outerHeight;
  var txt = "Window size: width="   w   ", height="   h;
  document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>
Метки: