WordPress中如何将BeRocket AJAX Filter筛选器展开从点击改为悬停

原有代码失效原因 #

• jQuery 1.9 及以上版本已废弃 on('hover') 绑定方式，hover 本质是 mouseenter + mouseleave 组合事件，直接绑定不会触发对应逻辑
• 原有代码中 e.preventDefault 未加执行括号属于语法错误，且悬停事件本身无需阻止默认行为
• 未做展开状态判断，会导致重复触发插件事件，引发展开/收起异常闪烁

可用实现代码 #

将以下代码添加到站点自定义 JS 配置区域、或子主题的自定义 JS 文件中即可生效：

jQuery(document).on('mouseenter', '.bapf_ocolaps .bapf_colaps_togl, .bapf_ccolaps .bapf_colaps_togl', function() {
    const $filterWrap = jQuery(this).closest('.bapf_ocolaps, .bapf_ccolaps');
    // 仅未展开的筛选器执行触发逻辑
    if (!$filterWrap.hasClass('bapf_opened')) {
        if ($filterWrap.is('.bapf_ocolaps')) {
            $filterWrap.trigger('bapf_ocolaps');
        } else {
            $filterWrap.trigger('bapf_ccolaps');
        }
    }
});

兼容备选方案 #

如果上述调用插件自定义事件的方式不生效，可以直接模拟点击触发，兼容性更强：

jQuery(document).on('mouseenter', '.bapf_ocolaps .bapf_colaps_togl, .bapf_ccolaps .bapf_colaps_togl', function() {
    const $toggleBtn = jQuery(this);
    const $filterWrap = $toggleBtn.closest('.bapf_ocolaps, .bapf_ccolaps');
    if (!$filterWrap.hasClass('bapf_opened')) {
        $toggleBtn.click();
    }
});

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