移动端点击WordPress导航项后隐藏汉堡菜单的实现方案

问题分析 #

你之前的代码仅定义了关闭函数，但未将其绑定到导航项的点击事件上；且直接修改display:none会和Bootstrap折叠组件的逻辑冲突（Bootstrap靠CSS类控制菜单显隐，而非直接操作display属性），导致功能失效。

解决方案（两种可选） #

方案1：原生JavaScript实现（无需依赖jQuery）

// 等待页面DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取折叠菜单容器和所有导航链接
  const collapseMenu = document.getElementById('bs-example-navbar-collapse-1');
  const navLinks = collapseMenu.querySelectorAll('a');

  // 为每个导航链接绑定点击事件
  navLinks.forEach(link => {
    link.addEventListener('click', function() {
      // 仅在移动端窗口（Bootstrap默认断点768px以下）执行关闭操作
      if (window.innerWidth < 768) {
        // 移除Bootstrap的显示类（Bootstrap 4+用show，Bootstrap 3用in）
        collapseMenu.classList.remove('show');
        // 确保菜单处于折叠状态
        collapseMenu.classList.add('collapse');
      }
    });
  });
});

方案2：jQuery实现（WordPress默认自带，兼容性更稳定）

jQuery(document).ready(function($) {
  // 为导航链接绑定点击事件
  $('#bs-example-navbar-collapse-1 a').on('click', function() {
    // 判断当前窗口是否为移动端
    if ($(window).width() < 768) {
      // 调用Bootstrap折叠组件的内置方法关闭菜单
      $('#bs-example-navbar-collapse-1').collapse('hide');
    }
  });
});

注意事项 #

1. 如果你的菜单容器ID不是bs-example-navbar-collapse-1，请替换为实际ID。
2. 若使用Bootstrap 3版本，方案1中需将show替换为in。
3. 将代码添加到WordPress主题的footer.php末尾（</body>标签前），或通过主题自定义功能的「自定义HTML」模块添加到页面底部。

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