WordPress环境下JS实现导航active状态切换图标功能失效如何解决？

问题根源 #

你当前active状态失效的核心原因是页面实际路径后缀和menuActive函数里判断的字符串不匹配：

• 比如「Violin Repairs」页面的实际访问路径是/repairs-restorations，用window.location.pathname.split("/").pop()拿到的路径后缀是repairs-restorations，但你函数里判断的是path == "violin-repairs"，匹配失败
• 比如「M.U.D.」页面实际路径是/m-u-d，拿到的后缀是m-u-d，但你判断的是path == "mud"，同样匹配失败
  所有非首页页面都匹配失败后，只有首页的判断偶尔触发，就会出现一直跳回首页图标的问题。

修复方案 #

第一步：统一路径映射规则 #

确保每个菜单a标签的data-link属性值，和对应页面的路径后缀/你自定义的pagename变量值完全一致即可。
比如「Violin Repairs」页面路径是/repairs-restorations，要么把a标签的data-link改成repairs-restorations，要么给这个页面的pagename变量赋值为violin-repairs，两边保持一致。

第二步：替换原有JS代码 #

把你原来的JS代码全部替换为下面的优化版，不需要写大量重复的if判断，后续新增菜单也不需要修改核心逻辑：

var imagelink2 = "@asset('images/unmarked.png')";
var imagelink = "@asset('images/marked.png')";
var currentPath = '';

$(document).ready(function(){
    // 获取当前页面对应的标识
    var path = window.location.pathname.split("/").pop();
    if(typeof pagename != 'undefined'){
        path = pagename;
    }
    currentPath = path;
    menuActive(currentPath);

    // hover交互逻辑
    $(".is_active a").hover(function() {
        menuActive($(this).data('link'));
    }, function() {
        menuActive(currentPath);
    });

    // 原有右键禁止、截图禁止逻辑保留
    $('img').bind('contextmenu', function(e) {
        return false;
    });
    $(document).keyup(function(e){
        if(e.keyCode == 44) return false;
    });
});

function menuActive(path){
    // 先重置所有菜单为未选中状态
    $('.is_active a img').attr('src', imagelink2).removeAttr('style');
    // 匹配当前path的菜单设置为选中状态
    $(`.is_active a[data-link="${path}"] img`).attr('src', imagelink).css("margin-top", "10px");
}

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