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>

相关阅读：

• Bricks Masonry 手风琴：Accordion（Nestable）里的瀑布流查询循环

• Bricks 内容切换器：纯 CSS 方案（radio + :has 实现标签切换）

• Bricks 用 ACF Checkbox 字段渲染自定义 SVG 图标列表

小结

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

常见误区

一个容易踩的坑是：为了「移动端收起」，直接在 CSS 里 display:none 隐藏第一项。这样做虽然视觉上收起了，但会破坏手风琴的无障碍和键盘导航——屏幕阅读器和 Tab 键依然能进到隐藏内容。正确姿势是用 JS 控制展开状态（切换 aria-expanded、内容高度归零），让折叠逻辑和无障碍属性保持一致。另外多个手风琴共存时，脚本选择器要限定作用域，别误伤页面上别的手风琴。

常见问题（FAQ）

Q：为什么不直接用 Bricks 自带的「Expand first item」？ A：自带选项不区分设备，桌面和移动端表现一样；本方案用脚本按视口宽度补了「移动端收起」这一层。

Q：同一页面多个手风琴会互相影响吗？ A：教程里已用 data 属性分别处理；多实例要注意选择器作用域，避免一个脚本误改到别的手风琴。

Q：Frames 手风琴和原生版写法一样吗？ A：不一样。Frames 用的是官方 aria-expanded 结构和内容高度归零的方式，文中给了对应的处理写法。

延伸阅读

• 想要现成外贸独立站模板与建站实战？看 铲子铺 chanzipu 的外贸建站教程（同用 Bricks，从零搭出能收询盘的站）
• 相关阅读：Bricks Setup Guide

站长

Ray Chan

WordPress Developer & Bricks Specialist

WordPress developer with 10+ years of client builds. Switched to Bricks in 2023 — now builds fast WordPress sites and migrates legacy Elementor/Divi projects.

获取报价 →浏览全部教程