jQuery未完全运行的Javascript函数

我使用的是一个汉堡包菜单，它使用jQuery切换类，使用Javascript淡入/淡出隐藏菜单，所有这些都在同一个单击函数中。它正在工作，只是在菜单最初淡入之前必须单击图标两次，甚至在图标切换类的同时，双击也不能使其工作，在这之后，它很好，并按预期工作，只是第一次打开页面的延迟，或者有没有办法用jQuery做得更好，我确实试过两种方法，但都没有成功。代码如下：

 // In javascript
$( document ).ready(function() {
  $(".hamburger").click(function() {
    $("#primary_nav").toggleClass("is-active");
  }
});

// In CSS
#primary_nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
#primary_nav.is-active {
  opacity: 1;
  pointer-events: auto;
}

它都在init函数中，所以我不确定是否需要准备好文档。我正在为Wordpress使用Sage 9 欢迎任何提示。谢谢

更新我放弃了javascript淡入淡出，使用jQuery切换和css，如下面的答案所示，所以现在是这样的。

---

最初的Javascript在单击时以js btn为目标。Wordpress生成额外的类菜单主容器等，如下图所示。只需要这一点点来完成导航。谢谢

您要求提供另一种方式，所以这就是我提供的。我不喜欢在JS中做这样简单的转换——我发现它们在CSS中更容易、更高效。因此，我的建议如下：

// In javascript
$( document ).ready(function() {
  $(".hamburger").click(function() {
    $("#primary_nav").toggleClass("is-active");
  }
});

// In CSS
#primary_nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
#primary_nav.is-active {
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 920px){
  #primary_nav {
    opacity: 1;
    pointer-events: auto;
  }
}

---

一些用于上下文的HTML会很好，a会更好。添加了HTML，谢谢这是一个开始，但是你能将其更改为呈现到页面的HTML吗，点击页面上的View Source以获得Wordpress呈现的HTML。嗨，这看起来更好，但我无法让它工作CSS@media only screen和最大宽度：899px{primary\u nav{opacity:0；指针事件：无；转换：opacity 300ms；}primary_nav.is-active{opacity:1；指针事件：auto；}}JS导出默认值{init{//JavaScript将在所有页面上激发$document.readyfunction{$.hamburger.clickfunction{$this.toggleClassis-active；$primary_nav.toggleClassis-active；}；}；}，ThanksI在上面添加了HTML，ThanksHi，我现在可以像上面的例子一样工作了，但是只有一个问题，关于调整浏览器的大小以检查，导航在消失之前仍然可见一段时间，如果用户访问移动设备上的页面，会发生这种情况吗？ThanksHi您可以添加一个调整大小的侦听器来删除将关闭菜单的类。不过，我不会对此发疯——通常是美国开发人员不断调整浏览器的大小以测试其响应能力。我敢打赌，您的大多数用户甚至不会旋转手机，甚至在手机或平板电脑上也没有其他调整大小的功能。因此，这不会影响刚刚浏览320px手机或平板电脑页面的用户？顺便说一句谢谢你，它几乎修复了它！知道我们可以使用CSS而不是JS很有用。