自定义WordPress主题中Font Awesome汉堡菜单无法点击展开求助

你的汉堡图标能正常显示但点击没反应，大概率是JS执行时机不对或者元素绑定出了问题，我帮你一步步排查修复：

1. 修复JS代码的执行时机与语法问题 #

你在functions.php里把JS挂在wp_head钩子上，这时候页面DOM还没渲染完成，浏览器找不到#js-menu和#js-navbar-toggle元素，自然绑定不上点击事件。另外代码里的转义字符写法不够规范，容易引发隐性问题。

把functions.php里的代码改成这样：

function wpb_hook_javascript() {
    ?>
    <script>
        // 等整个DOM加载完成后再执行代码
        document.addEventListener('DOMContentLoaded', function() {
            // 获取元素
            const mainNav = document.getElementById('js-menu');
            const navBarToggle = document.getElementById('js-navbar-toggle');
            
            // 先判断元素是否存在，避免控制台报错
            if (navBarToggle && mainNav) {
                navBarToggle.addEventListener('click', function () {
                    mainNav.classList.toggle('active');
                });
            }
        });
    </script>
    <?php
}
// 把钩子从wp_head改成wp_footer，让JS在页面底部加载，进一步确保DOM已就绪
add_action('wp_footer', 'wpb_hook_javascript');

2. 确认菜单DOM结构完整 #

你的header.php里只贴了汉堡按钮的代码，要确保菜单容器#js-menu确实存在，完整的结构应该像这样：

<!--TOGGLE-->
<script src="https://kit.fontawesome.com/721c0cc9d7.js"></script>
<!-- HEADER -->
<header role="banner">
    <nav class="navbar">
        <span class="navbar-toggle" id="js-navbar-toggle">
            <i class="fas fa-bars"></i>
        </span>
        <!-- 必须存在id为js-menu的菜单容器 -->
        <ul id="js-menu" class="main-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于我们</a></li>
            <!-- 其他菜单项 -->
        </ul>
    </nav>
</header>

3. 补充响应式CSS样式 #

即使JS正确添加了active类，没有对应的CSS样式，菜单也不会显示出来。你需要在主题的CSS文件里添加这些样式：

/* 默认隐藏移动端菜单 */
.main-nav {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 激活时显示菜单 */
.main-nav.active {
    display: block;
    /* 可根据需求添加样式，比如上下间距、背景色等 */
}

/* 桌面端隐藏汉堡按钮，正常显示菜单 */
@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
    
    .main-nav {
        display: flex;
        /* 桌面端菜单的布局样式，比如横向排列 */
    }
}

4. 排查控制台错误 #

如果还是没效果，按下F12打开浏览器控制台，查看「Console」标签页：

• 如果有Cannot read properties of null的错误，说明找不到对应的DOM元素，检查ID是否拼写正确
• 如果有Font Awesome相关的错误，确认你的kit链接是否有效

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