带有 jQ​​uery 的 Javascript 函数无法完全正常工作

Question

我正在使用一个汉堡菜单，它使用 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() 函数内，所以我不确定是否需要准备好文档。 (我使用 Sage 9 for WordPress) 欢迎任何提示。谢谢

更新我废弃了 javascript fade 以使用 jQuery 切换和 css，如下面的答案所示，所以现在就像这样。 原始 Javascript 的目标是点击时的 js-btn。 WordPress 生成额外的类 menu-main-container 等，如下图所示。只需要一点点即可完成导航。谢谢

Answer 1

你要求另一种方式，所以这就是我提供的。我不喜欢在 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;
  }
}