WordPress开发：如何在PHP文件中使用JavaScript变量控制菜单显隐

首先明确一个基础运行逻辑：PHP是服务端预执行语言，在页面发送到用户浏览器之前就已经运行完毕，而JS是浏览器端运行的语言，所以你不可能直接在PHP代码中调用JS变量isMenuOpen。你要实现的菜单切换效果完全可以在客户端通过JS实现，不需要用到PHP处理。

第一步：修复你现有JS的错误 #

你当前的JS代码有两个明显问题：

• 用const定义的常量无法重新赋值，要改成let
• 定义的变量名是isMenuOpen，函数内调用的是isMobileMenuOpen，变量名不匹配

修改后的完整JS代码如下：

// 改为let声明，允许后续修改值
let isMenuOpen = false;
// 提前获取菜单DOM元素
const mobileMenu = document.querySelector('.mobile-menu');

function toggleMenu() {
    isMenuOpen = !isMenuOpen;
    // 根据变量值控制菜单显示隐藏
    mobileMenu.style.display = isMenuOpen ? 'block' : 'none';
}

// 页面加载完成后默认隐藏菜单
document.addEventListener('DOMContentLoaded', () => {
    mobileMenu.style.display = 'none';
})

第二步：修改PHP输出的HTML结构 #

只需要给你的菜单div加个对应类名即可，PHP不需要做任何特殊逻辑处理：

<button onclick="toggleMenu()">
  toggle
</button>
<!-- 加mobile-menu类名和JS选择器对应 -->
<div class="mobile-menu">My Menu</div>

更简洁的替代实现（不需要维护单独变量） #

你也可以直接通过切换CSS类实现效果，代码更简洁：

1. 先加自定义CSS：

.mobile-menu {
    display: none;
}
.mobile-menu.active {
    display: block;
}

2. JS代码简化为：

function toggleMenu() {
    document.querySelector('.mobile-menu').classList.toggle('active');
}

额外提示：WordPress中修改主题代码建议使用子主题，避免主题更新后你修改的代码被直接覆盖。

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