Question

我对wordpress和Jquery有一些奇怪的问题。我有这个代码来显示和隐藏左侧的响应式导航：

$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});

它可以在没有Wordpress的情况下使用我的网站，但是一旦在Wordpress中，似乎有一半的代码可以工作：创建十字架来关闭菜单，除了菜单没有出现。

你可以在某些方面启发我吗？

脚本已加载，是否有更快速，更简单的方法来使用jquery和toogle（）转换代码？
它只能是代码的麻烦，但为什么它在Wordpress上不再起作用了？

非常感谢你的帮助，在提出问题之前我尝试过很多东西。 ^^

Answer 1

如果它适用于你的任何网站意味着代码是好的，只是你的css可能有冲突，所以包括最后菜单相关的css，如果它也不起作用，发布你的CSS代码，所以我们可以更好地看到正在发生的事情，并且不需要这么多代码。在您的html中初始化菜单而不使用.open类，并使用JQUERY：

$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});

Answer 2

jQuery在非冲突模式下附带wordpress，为了确保一切正常，你应该使用jQuery变量而不是$ variable。

您可以选择执行以下操作

jQuery(document).ready(function($) {

  // $ variable can be used here 
  $('.menu').on('click', function() {
    if ($('.responsive__menu').hasClass('is-open')) {
      $('.respons__menu').removeClass('is-open');
      $('.menu').removeClass('is-active');
    } else {
      $('.responsive__menu').addClass('is-open');
      $('.menu').addClass('is-active');
    }
  });

});

Wordpress＆amp; jQuery响应式导航

2 个答案: