如何强制WordPress移动端导航菜单保持展开状态

算力阿峰

2026-6-16

解决Twenty Twenty-Four主题导航菜单右键检查时自动关闭的问题

以下是几种实用的解决方法，覆盖临时调试和长期修改场景：

1. 临时调试：暂停JavaScript执行

打开浏览器开发者工具后，切换到Sources面板，点击顶部的暂停按钮（⏸️）。之后点击菜单按钮展开菜单，此时JavaScript会停止执行，菜单就不会因为右键检查而关闭，你可以自由调试CSS样式。

或者，你可以在菜单的点击/关闭事件上设置断点，然后右键禁用该断点，也能达到相同效果。

2. 修改菜单的JavaScript逻辑（长期方案）

Twenty Twenty-Four的菜单展开/收起逻辑通常在主题的assets/js/navigation.js文件中。核心问题是菜单监听了全局点击事件，右键检查时会触发该事件导致关闭。你可以添加判断，忽略右键点击的情况：

// 通过子主题或Code Snippets插件添加这段代码，不要直接修改主题文件
document.addEventListener('click', function(event) {
  const responsiveMenu = document.querySelector('.wp-block-navigation__responsive-container');
  if (responsiveMenu && responsiveMenu.classList.contains('is-menu-open') && !responsiveMenu.contains(event.target)) {
    // 右键点击（button值为2）时不关闭菜单
    if (event.button !== 2) {
      responsiveMenu.classList.remove('is-menu-open');
    }
  }
});

3. 用CSS强制菜单保持展开

临时调试时，直接在开发者工具的CSS面板添加以下规则，强制菜单显示：

/* 强制展开响应式菜单 */
.wp-block-navigation__responsive-container.is-menu-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* 如果是移动端菜单，可能需要额外设置内容区域 */
.wp-block-navigation__responsive-container-content {
  display: block !important;
}