如何让自定义脚本仅在768px及以下屏幕控制Elementor标签页状态

核心调整逻辑 #

针对现有脚本无差别触发全标签闭合的问题，只需要在执行DOM操作前增加视口宽度判断分支，同时补充窗口尺寸变化的状态同步逻辑，就能实现需求：

• 当屏幕宽度≤768px时，执行原有的全标签闭合逻辑，所有标签保持未激活、内容隐藏的状态
• 当屏幕宽度≥768px时，恢复Elementor原生的标签默认交互：第一个标签自动激活展开，其余标签处于闭合状态
• 增加窗口缩放监听与防抖处理，避免用户拖动窗口调整尺寸时，标签状态和当前视口不匹配

调整后的完整脚本 #

直接替换你原来嵌入的代码即可：

jQuery(document).ready(function($) { 
    // 封装标签状态同步逻辑，供首次加载、窗口缩放场景复用
    function syncTabsState() {
        // 获取当前视口实际宽度，兼容不同浏览器的宽度取值逻辑
        const viewportWidth = window.innerWidth || document.documentElement.clientWidth;

        if (viewportWidth <= 768) {
            // 窄屏场景：移除所有标签的激活状态，隐藏全部标签内容
            $('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-content').css('display', 'none');
        } else {
            // 宽屏场景：还原Elementor默认的首个标签展开的原生状态
            const $firstTabTitle = $('.elementor-tab-title').first();
            const firstTabContentId = $firstTabTitle.attr('aria-controls');
            
            // 重置所有标签状态
            $('.elementor-tab-title').removeClass('elementor-active');
            $('.elementor-tab-content').hide();
            
            // 给第一个标签加激活态、展示对应内容
            $firstTabTitle.addClass('elementor-active');
            $('#' + firstTabContentId).show();
        }
    }

    // 保留原有的延迟执行逻辑，等待Elementor组件完成渲染，避免操作失效
    setTimeout(syncTabsState, 10);

    // 监听窗口缩放事件，加防抖减少性能消耗
    let resizeDebounceTimer;
    $(window).on('resize', function() {
        clearTimeout(resizeDebounceTimer);
        resizeDebounceTimer = setTimeout(syncTabsState, 100);
    });
});

关键效果说明 #

• 窄屏（≤768px）打开页面时，标签页会直接呈现全闭合状态，符合移动端的折叠交互预期
• 宽屏（≥768px）打开页面时，标签页会保持Elementor默认的首个标签展开的效果，和组件原生表现一致
• 拖动窗口跨阈值调整尺寸时，标签状态会自动同步切换，不会出现状态错乱的问题

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