使用jQuery的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淡化以使用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;
  }
}