调整窗口大小时如何重新计算折叠面板项的max-height？

解决方案 #

核心修改点是单独编写resize事件的处理逻辑，定位当前打开的折叠项后重新计算高度，同时增加防抖优化性能。

完整修改后的代码如下：

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

    if (!accordion) {
        return;
    }

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

    // 防抖工具函数，避免resize频繁触发重算
    const debounce = (func, wait = 150) => {
        let timeout;
        return (...args) => {
            clearTimeout(timeout);
            timeout = setTimeout(() => func.apply(this, args), wait);
        };
    };

    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;

        accordionHeight(itemBox, itemBoxHeight);

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

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

    // resize事件专属处理函数
    const handleAccordionResize = () => {
        // 找到所有当前打开的折叠项
        const openItems = accordion.querySelectorAll('.accordion__item.open');
        openItems.forEach(openItem => {
            const itemBox = openItem.querySelector('.accordion__box');
            // 重新计算当前内容高度并更新
            const currentHeight = itemBox.scrollHeight;
            accordionHeight(itemBox, currentHeight);
        });
    };

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

    // 绑定加了防抖的resize处理函数
    window.addEventListener('resize', debounce(handleAccordionResize));
})();

修改说明：

• 新增了debounce防抖函数，避免窗口调整过程中高频触发重算逻辑，降低性能损耗，默认防抖间隔150ms可自行调整
• 新增handleAccordionResize函数作为resize事件的专属回调：会自动定位当前所有处于打开状态的折叠项，重新计算内容高度后调用accordionHeight更新变量
• 替换了原来直接绑定accordionHeight到resize事件的错误逻辑，现在窗口尺寸变化、横竖屏切换时打开的折叠项会自动适配最新高度

内容的提问来源于stack exchange，提问作者Galanthus