Bricks 手风琴（Nestable）：第一项桌面端展开、移动端收起

更新于 2024-11-05。

在 Bricks Facebook 群里，有用户提问：

怎么让 nestable 手风琴的第一个条目在桌面端展开、移动端收起？

这里用一小段自定义 JavaScript 就能实现。

做法

先在构建器里选中你的 Accordion (Nestable) 元素，打开「Expand first item（展开第一项）」开关。

用 Bricks 编辑页面/模板，点击 设置（齿轮图标）→ 页面设置（PAGE SETTINGS）→ 自定义代码（CUSTOM CODE），在 Body (footer) scripts（页脚脚本） 下添加：

<script>

document.addEventListener('DOMContentLoaded', function() {
    // 仅移动端：检查第一项是否展开，若是则收起
    if (window.innerWidth <= 768) { // 按你的移动端断点调整
        const firstContent = document.querySelector('#brxe-nmcaww .brxe-block.listening:first-child .accordion-content-wrapper');
        if (firstContent) {
            firstContent.style.display = 'none';
        }
    }
});

</script>

把 #brxe-nmcaww 换成你的 Accordion (Nestable) 元素的 HTML 选择器。

注意：这段代码只在 768px 及以下的页面刷新后生效；如果从桌面端把窗口缩小到移动端尺寸，是看不到效果的（必须刷新页面）。

更新 1：使用 Frames 手风琴时

如果你用的是 Frames 的手风琴，改用这段代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 处理移动端手风琴状态的函数
    const handleMobileAccordion = () => {
        if (window.innerWidth <= 768) {
            const firstAccordionItem = document.querySelector('.fr-faq-accordion-alpha .fr-accordion__item:first-child');
            
            if (firstAccordionItem) {
                const header = firstAccordionItem.querySelector('.fr-accordion__header');
                const body = firstAccordionItem.querySelector('.fr-accordion__body');
                const icon = firstAccordionItem.querySelector('.fr-accordion__icon');
                
                // 移除展开状态
                header.setAttribute('aria-expanded', 'false');
                
                // 把内容高度重置为 0
                body.style.height = '0px';
                
                // 移除图标的翻转类（如果存在）
                if (icon) {
                    icon.classList.remove('fr-accordion__icon--flipped');
                }
            }
        }
    };

    // 初始加载时执行
    handleMobileAccordion();

    // 窗口尺寸变化时执行
    window.addEventListener('resize', handleMobileAccordion);
});
</script>

同一页面有多个 Frames 手风琴

页面里挂了多个 Frames 手风琴时，改用这段（带防抖的 resize 监听）：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 处理移动端手风琴状态的函数
    const handleMobileAccordions = () => {
        if (window.innerWidth <= 768) {
            // 获取页面上所有手风琴
            const accordions = document.querySelectorAll('[data-fr-accordion-options]');
            
            accordions.forEach(accordion => {
                // 解析手风琴配置
                const options = JSON.parse(accordion.dataset.frAccordionOptions || '{}');
                
                // 只处理开启了 firstItemOpened 的手风琴
                if (options.firstItemOpened) {
                    const firstAccordionItem = accordion.querySelector('.fr-accordion__item:first-child');
                    
                    if (firstAccordionItem) {
                        const header = firstAccordionItem.querySelector('.fr-accordion__header');
                        const body = firstAccordionItem.querySelector('.fr-accordion__body');
                        const icon = firstAccordionItem.querySelector('.fr-accordion__icon');
                        
                        // 移除展开状态
                        header.setAttribute('aria-expanded', 'false');
                        
                        // 把内容高度重置为 0
                        body.style.height = '0px';
                        
                        // 移除图标的翻转类（如果存在）
                        if (icon) {
                            icon.classList.remove('fr-accordion__icon--flipped');
                        }
                    }
                }
            });
        }
    };

    // 初始加载时执行
    handleMobileAccordions();

    // 窗口尺寸变化时执行（防抖 250ms）
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(handleMobileAccordions, 250);
    });
});
</script>

小结

桌面端靠「Expand first item」保持第一项展开；移动端脚本在 DOM 加载后检查视口宽度，≤768px 时把第一项的内容容器 display 设为 none（Frames 版则移除 aria-expanded、内容高度归零、图标去掉翻转类）。Frames 多手风琴版会解析每个手风琴的 data-fr-accordion-options 配置，只处理 firstItemOpened 为 true 的，并在窗口尺寸变化时防抖重跑，保证切换断点时状态同步。