如何移除WordPress菜单中特定<li>的role="link"属性

问题分析 #

你之前的代码存在两个关键问题：

• jQuery对象无法直接调用原生JS的removeAttribute()方法，需使用jQuery专属的removeAttr()方法
• 错误选中了<li>元素，但role="link"实际是在<li>内部的<a>标签上

解决方案 #

1. 针对特定菜单项（硬编码ID） #

如果已经明确目标菜单项的ID（比如你提到的menu-item-42615和另一个对应ID），直接选中内部<a>标签移除属性即可：

jQuery(function($){
  // 移除第一个标题项的role属性
  $('.menu-item-42615 a').removeAttr('role');
  // 移除第二个标题项的role属性，替换为对应菜单项ID
  $('.menu-item-xxxxxx a').removeAttr('role');
});

2. 通用方案（自动识别无链接菜单标题） #

如果希望自动处理所有无实际链接的菜单标题（即<a>标签无href属性或href为空），可以用更灵活的选择器：

jQuery(function($){
  // 匹配菜单中无href或href为空的<a>标签，移除role属性
  $('.et_pb_menu li a:not([href]), .et_pb_menu li a[href=""]').removeAttr('role');
});

注意：.et_pb_menu是你的菜单容器类，需根据实际页面结构替换为自己的菜单容器选择器。

3. WordPress后端原生修改（推荐） #

前端修改属于临时补救，更规范的做法是通过WordPress钩子直接修改菜单输出，无需依赖JS：
将以下代码添加到主题的functions.php文件中：

add_filter('nav_menu_link_attributes', 'remove_role_from_empty_menu_links', 10, 3);
function remove_role_from_empty_menu_links($atts, $item, $args) {
  // 判断菜单项是否为无链接的自定义项
  if (empty($item->url)) {
    unset($atts['role']);
  }
  return $atts;
}

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