将Woodmart主题导航的触发方式从悬停改为点击

步骤1：禁用默认悬停触发（自定义CSS） #

先通过CSS取消左侧导航默认的悬停展开行为，避免和自定义JS冲突：

/* 禁用左侧粘性导航的悬停展开 */
.wd-sticky-nav.wd-opened-on-hover:hover .wd-sticky-nav-dropdown {
    display: none !important;
}
/* 确保点击后显示菜单的样式不受影响 */
.wd-sticky-nav.wd-sticky-nav-opened .wd-sticky-nav-dropdown {
    display: block !important;
}

步骤2：添加自定义JS实现点击+移出关闭逻辑 #

在主题设置的「自定义JS」中添加以下代码，替换你之前的无效代码：

jQuery(document).ready(function($) {
    // 解绑原有事件，避免冲突
    $('.wd-sticky-nav-title').off('click hover');
    
    // 绑定点击事件，切换菜单展开状态
    $('.wd-sticky-nav-title').on('click', function(e) {
        e.preventDefault();
        var $parentNav = $(this).closest('.wd-sticky-nav');
        $parentNav.toggleClass('wd-sticky-nav-opened');
    });

    // 鼠标移出菜单区域时关闭菜单
    $('.wd-sticky-nav-dropdown').on('mouseleave', function() {
        $(this).closest('.wd-sticky-nav').removeClass('wd-sticky-nav-opened');
    });
});

代码说明 #

• .off('click hover')：清空导航标题上原有的点击、悬停事件，避免和主题默认逻辑冲突
• 点击标题时切换自定义类wd-sticky-nav-opened，配合步骤1的CSS控制菜单显示/隐藏
• 监听菜单下拉区域的mouseleave事件，鼠标移出时移除展开类，自动关闭菜单

注意事项 #

1. 修改后需清除主题缓存和浏览器缓存再测试
2. 若菜单样式出现异常，可调整CSS中!important的优先级，或检查主题默认样式的类名是否匹配当前版本

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