wordpress外贸建站教程：让Elementor Tab选项卡悬停展开

继续分享wordpress外贸建站教程。Elementor编辑器自带的Tab选项卡现在已经比较好用了，配合容器嵌套功能，可以做出各种各样的内容展示效果，但是这个自带的Tab选项卡有个小缺陷，就是每个选项卡需要点击才能展开。

这其实并不算问题，但在一些特定的情况下，点击展开就不太友好。如上图所示，悦然在一个wordpress外贸建站项目中使用到了Mega大型菜单，菜单调用了Tab选项卡，里面的内容如果也是点击再展开，就感觉不太好了，因为导航菜单一般都是鼠标放上去就展开的。

这种情况有两种处理思路：

一是换插件，比如一些第3方的Elementor扩展插件就可以设置悬停展示，但是这些第3方插件又不能容器嵌套，不如自带的方便。

另外一个就是使用代码了，下面是悦然自用的一段js代码：

jQuery(document).ready(function($) {
    console.log('使用激进选择器初始化');
    
    function initHoverTabs() {
        // 尝试多种可能的选择器
        var selectors = [
            '.elementor-tab-title',
            '.e-tab-title',
            '[role="tab"]',
            '.elementor-tab-toggle',
            '.e-tab-toggle',
            'a[data-tab]',
            'div[data-tab]'
        ];
        
        var found = false;
        
        selectors.forEach(function(selector) {
            if ($(selector).length > 0) {
                console.log('找到选择器: ' + selector + ', 数量: ' + $(selector).length);
                $(selector).hover(function() {
                    console.log('悬停事件触发');
                    // 尝试多种点击方式
                    $(this).click(); // 方法1: jQuery点击
                    if (typeof $(this).get(0).click === 'function') {
                        $(this).get(0).click(); // 方法2: 原生DOM点击
                    }
                    if (typeof $(this).get(0).dispatchEvent === 'function') {
                        var event = new MouseEvent('click', {
                            view: window,
                            bubbles: true,
                            cancelable: true
                        }); // 方法3: 创建自定义事件
                        $(this).get(0).dispatchEvent(event);
                    }
                });
                found = true;
            }
        });
        
        if (!found) {
            console.log('未找到任何Tab元素，将在1秒后重试');
            setTimeout(initHoverTabs, 1000);
        } else {
            console.log('Tab悬停功能成功初始化');
        }
    }
    
    // 立即执行
    initHoverTabs();
});

大家把上面的代码添加到wp code插件中就可以了，然后刷新网站或清空缓存即可生效。（但是：代码仅在我自己的外贸建站项目中测试，建议大家使用之前一定要先备份网站）

OK，今天的分享就到这里吧。