toggleClass在点击事件函数内失效、外部正常的原因排查

我猜你遇到的核心问题是a标签的默认跳转行为导致页面刷新，刚加上的类瞬间就被重置了，所以看起来toggleClass没生效——毕竟alert是同步执行的，能弹出来，但页面刷新会让DOM回到初始状态。

咱们一步步拆解：

• 你的点击事件确实触发了（alert能弹就是证明），但<a href="" class="burger-nav"></a>这个空href的a标签，点击后会默认刷新当前页面，toggleClass刚给ul加上"open"类，页面一刷新就全没了，自然看不到效果。
• 另外可以优化下选择器，你的ul有明确的类burger-nav-ul，用更精确的选择器能避免意外选中其他ul元素。

修复代码示例 #

给点击事件加个阻止默认行为的处理，同时优化选择器：

$(".burger-nav").on("click", function(event) {
    // 阻止a标签的默认跳转行为
    event.preventDefault();
    // 用更精确的选择器定位目标ul
    $("header nav ul.burger-nav-ul").toggleClass("open");
    alert("点击事件触发了");
});

或者你也可以直接把a标签的href改成javascript:void(0)来阻止跳转，但用event.preventDefault()更灵活，不会破坏href的其他潜在用途（比如后期加无障碍跳转逻辑）。

另外再确认下：如果你的JS代码是在DOM加载完成前执行的，记得把代码包在$(document).ready()里，不过你说放外面能正常运行，应该已经处理了DOM加载的问题，这个可以不用太担心。

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