WordPress中如何为带menu-item-has-children类的<li>插入指定span元素

• 核心思路：无需修改WordPress菜单生成的PHP逻辑，完全通过前端jQuery实现按钮插入和交互，操作成本最低，不会影响原有站点功能。

实现代码 #

1. 插入带自动递增ID的展开按钮 + 绑定点击事件 #

将以下代码放到页面jQuery加载完成后的执行逻辑中即可：

jQuery(document).ready(function($) {
  // 遍历所有带子菜单的菜单项，插入带自增ID的toggle按钮
  $('.menu-item-has-children').each(function(index) {
    // index从0开始自动递增，完美匹配menu_toggle[x]的命名要求
    $(this).prepend(`<span id="menu_toggle${index}" class="menu-toggle-btn">+</span>`);
  });

  // 绑定点击事件控制子菜单显隐
  $('.menu-toggle-btn').on('click', function() {
    // 切换当前菜单项下第一层子菜单的显示状态
    $(this).siblings('ul').first().toggle();
    // 可选：点击切换+/-符号，提升交互体验
    $(this).text($(this).text() === '+' ? '-' : '+');
  });
});

2. 补充适配CSS（和原有静态站样式对齐） #

/* 移动端样式适配 */
@media (max-width: 768px) {
  .menu-toggle-btn {
    float: right;
    padding: 6px 12px;
    cursor: pointer;
    /* 可根据原有静态站的toggle样式调整参数 */
  }
  /* 子菜单默认隐藏，和你现有配置对齐 */
  .menu-item-has-children > ul {
    display: none;
    width: 100%;
  }
}

部署方式 #

• JS代码：复制后用<script>标签包裹，粘贴到WordPress后台「外观→自定义→自定义HTML」的页脚代码区域即可
• CSS代码：直接复制粘贴到WordPress后台「外观→自定义→额外CSS」输入框中保存即可，不需要修改主题源文件，主题升级也不会丢失配置。

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