文章/答案/技术大牛

发布

社区首页 >问答首页 >jQuery不能完全工作的Javascript函数

问jQuery不能完全工作的Javascript函数
EN

Stack Overflow用户

提问于 2018-02-13 07:47:19

回答 1查看 99关注 0票数 0

我正在使用一个汉堡菜单，它使用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生成额外的类，菜单-主容器等，如下图所示。只需要一点点就可以完成导航了。谢谢

javascript

jquery

wordpress

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-13 08:15:59

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48757419

复制

相似问题

问jQuery不能完全工作的Javascript函数
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery不能完全工作的Javascript函数EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery不能完全工作的Javascript函数
EN