WpBakery Tour模块打开后无法折叠标签页问题求助

这确实是WpBakery Page Builder Tour模块的一个常见小痛点——初始设置折叠后，标签页展开就没法再收回去，移动端用户得滑完所有内容才能切标签，体验太糟。我来帮你完善那段代码，实现点击切换（展开/折叠）的完整功能：

完整JavaScript解决方案 #

// 等待页面DOM完全加载后执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有Tour模块的标题文本元素
    const tourTitleTexts = document.getElementsByClassName('vc_tta-title-text');
    
    // 遍历每个标题元素，绑定点击事件
    for (let i = 0; i < tourTitleTexts.length; i++) {
        tourTitleTexts[i].addEventListener('click', function(e) {
            // 阻止默认跳转行为，避免和模块自带逻辑冲突
            e.preventDefault();
            
            // 找到当前标题所属的标签页容器
            const parentTab = this.closest('.vc_tta-tab');
            // 找到对应的内容面板
            const contentPanel = parentTab.nextElementSibling;
            
            // 切换标签页的激活状态（控制折叠/展开）
            parentTab.classList.toggle('vc_active');
            // 同步切换内容面板的显示状态
            contentPanel.classList.toggle('vc_active');
            
            // 移动端额外优化：点击后滚动到当前标签页顶部
            if (window.innerWidth < 768) {
                parentTab.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
        });
    }
});

代码逻辑说明 #

• DOMContentLoaded监听：确保页面所有元素加载完成后再执行，避免找不到目标元素的问题。
• closest()方法：精准定位当前标题对应的标签页容器，比逐层查找父元素更可靠。
• classList.toggle()：一键切换vc_active类——WpBakery正是用这个类来控制标签页的展开/折叠状态，原生且高效。
• 移动端滚动优化：可选功能，让用户点击后快速定位到标签页顶部，避免内容偏移影响体验。

如何添加这段代码？ #

你可以选以下任意一种简单方式：

• 进入WordPress后台「外观」→「自定义」→「额外JS」（不同主题位置可能略有差异），直接粘贴代码保存。
• 如果主题自带自定义JS编辑功能，找到对应板块粘贴代码即可。
• 备份主题footer.php文件后，在</body>标签前添加<script>...</script>包裹这段代码。

注意事项 #

• 如果你之前已经添加了部分代码，请替换成完整版本，避免重复绑定事件导致冲突。
• 测试前清空浏览器缓存，确保新代码生效。
• 若你的Tour模块有自定义类名（比如修改过样式），请对应调整代码中的类选择器。

这样修改后，用户点击已展开的标签页标题就能重新折叠，移动端切换标签页的体验会顺畅很多。

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