如何设置Wix Velo移动端FAQ手风琴组件页面加载时默认折叠？

你的问题核心是移动端页面加载时折叠框全部展开、桌面端正常，这是因为Wix的响应式设计中，桌面和移动端的组件初始状态是独立存储的，同时代码缺少页面加载时的统一初始化逻辑。以下是解决步骤：

1. 修正编辑器移动端组件初始状态 #

在Wix编辑器中切换到移动端视图：

• 逐个选中所有CollapsibleStrip组件，在右侧属性面板将初始状态设置为「折叠」
• 对应每个折叠框的减号图标设置为「隐藏」，加号图标设置为「显示」

这一步确保编辑器层面的移动端初始状态正确，避免加载时默认展开。

2. 优化代码添加强制初始化逻辑 #

修改你的Velo代码，添加初始化函数，在页面加载时强制将所有折叠框设为关闭状态，同时同步图标显示状态，还能减少冗余重复代码：

$w.onReady(function () {
    // 初始化所有折叠框为关闭状态并绑定点击事件
    initCollapsibles([
        { button: '#aboutUsCollapseButton', strip: '#aboutUsCollapsibleStrip', plus: '#aboutUsPlusSign', minus: '#aboutUsMinusSign' },
        { button: '#volunteerCollapseButton', strip: '#volunteerCollapsibleStrip', plus: '#volunteerPlusSign', minus: '#volunteerMinusSign' },
        { button: '#findMissionsCollapseButton', strip: '#findMissionsCollapsibleStrip', plus: '#findMissionsPlusSign', minus: '#findMissionsMinusSign' },
        { button: '#missionAccomplishedCollapseButton', strip: '#missionAccomplishedCollapsibleStrip', plus: '#missionAccomplishedPlusSign', minus: '#missionAccomplishedMinusSign' },
        { button: '#agentRankCollapseButton', strip: '#agentRankCollapsibleStrip', plus: '#agentRankPlusSign', minus: '#agentRankMinusSign' },
        { button: '#agentBriefingRoomCollapseButton', strip: '#agentBriefingRoomCollapsibleStrip', plus: '#agentBriefingRoomPlusSign', minus: '#agentBriefingRoomMinusSign' },
        { button: '#shopCollapseButton', strip: '#shopCollapsibleStrip', plus: '#shopPlusSign', minus: '#shopMinusSign' },
        { button: '#giveCollapseButton', strip: '#giveCollapsibleStrip', plus: '#givePlusSign', minus: '#giveMinusSign' },
        { button: '#contactCollapseButton', strip: '#contactCollapsibleStrip', plus: '#contactPlusSign', minus: '#contactMinusSign' },
        { button: '#socialMediaCollapseButton', strip: '#socialMediaCollapsibleStrip', plus: '#socialMediaPlusSign', minus: '#socialMediaMinusSign' }
    ]);
});

function initCollapsibles(collapsibles) {
    collapsibles.forEach(item => {
        const strip = $w(item.strip);
        const plusIcon = $w(item.plus);
        const minusIcon = $w(item.minus);
        
        // 强制设置折叠状态和图标显示
        strip.collapse();
        plusIcon.show();
        minusIcon.hide();
        
        // 绑定点击切换事件
        $w(item.button).onClick(() => {
            toggleBox(strip, plusIcon, minusIcon);
        });
    });
}

function toggleBox(boxElement, plusSign, minusSign) {
    const isCollapsed = boxElement.collapsed;
    if (isCollapsed) {
        plusSign.hide();
        minusSign.show();
        boxElement.expand();
    } else {
        minusSign.hide();
        plusSign.show();
        boxElement.collapse();
    }
}

代码说明： #

• 将所有折叠组件的选择器整理为数组，通过循环完成初始化和事件绑定，避免重复代码
• initCollapsibles函数在页面加载时强制设置每个折叠条为折叠状态，同时确保加号显示、减号隐藏，双重保障初始状态正确
• 保留原有的toggleBox逻辑，点击按钮时正常切换折叠状态

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