WordPress Neve主题移动端汉堡菜单下拉项点击失效解决方法

问题说明 #

使用Neve主题搭建的WordPress站点，移动端汉堡菜单中带下拉的「Services」菜单项无独立对应页面，默认仅点击右侧箭头可展开下拉，点击文字区域无响应，需要实现文字、箭头点击均可触发下拉展开的效果。 #

修复方法 #

方法1：主题内置设置调整（优先尝试） #

• 登录WordPress后台，进入「外观」→「自定义」面板
• 找到「菜单」选项，选择移动端分配的主导航位置
• 定位到「Services」这个带下拉的父级菜单项，展开设置项，开启*「点击父菜单项触发下拉展开」*开关
• 保存自定义设置，清空站点缓存、浏览器缓存后测试即可

方法2：自定义JS代码修复（内置设置无对应选项时使用） #

不要直接修改父主题核心文件，避免主题更新后代码被覆盖，可选择以下任意一种方式添加代码：

• 若使用了Code Snippets这类自定义代码插件，直接新建JS片段粘贴代码
• 若使用子主题，将代码粘贴到子主题footer.php文件的</body>标签前
• 进入「外观」→「小工具」，添加一个自定义HTML小工具到页脚位置，代码包裹在<script></script>标签内粘贴即可

对应功能代码如下：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配Neve移动端侧边菜单的所有带子级的菜单项
  const dropdownParents = document.querySelectorAll('.header-menu-sidebar .menu-item-has-children > a');
  dropdownParents.forEach(function(linkItem) {
    linkItem.addEventListener('click', function(e) {
      // 阻止无页面的父菜单项默认跳转
      e.preventDefault();
      // 触发对应下拉切换按钮的点击事件
      const toggleTrigger = this.nextElementSibling;
      if (toggleTrigger && toggleTrigger.classList.contains('dropdown-menu-toggle')) {
        toggleTrigger.click();
      }
    });
  });
});

注意事项 #

• 代码添加完成后必须清空全站缓存（包括服务器缓存、CDN缓存、浏览器本地缓存）后再测试，避免缓存导致功能不生效
• 如果后续给「Services」设置了独立页面，只需删除代码中e.preventDefault();这一行，即可实现点击文字先跳转页面、点击箭头展开下拉的逻辑，不影响正常使用

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