jQuery 代碼段在 WordPress 網站上不起作用

Question

WordPress 版本 - 6.3.1

主題 - JointsWP（空白入門主題）

jQuery 版本 - 6.3.3（也試過 6.3.1）

網站鏈接 - https://legiondesigns.com/dev/labella/

編輯：也沒有控制台錯誤

我的 WordPress 網站似乎有問題。 在 codepen.io 中運行 jquery 腳本時，一切正常。 我在我多年前設計的另一個網站上使用這個代碼片段，它使用 jQuery 6.3.1 運行良好，但是當通過我的網站運行該代碼時，它根本不是 function。

有問題的代碼片段：

jQuery(document).ready(function( $ ){
 $('.mobileBtn').click(function(){
  if( $('.mobileNav').hasClass('animate__zoomIn') ){
    $('.mobileNav').removeClass('animate__zoomIn').addClass('animate__zoomOut');
    $('.mobileBtn').removeClass('btnActive');
    setTimeout(function () {
      $('.mobileNav').css({display: 'none'}).removeClass('animate__zoomOut')
    },1000 );
    // alert('1');
  }
  else{
    $('.mobileNav').css({display: 'block'}).addClass('animate__zoomIn');
    $('.mobileBtn').addClass('btnActive');
    // alert('2');
  }
});
}); 

當我在 codepen.io ( https://codepen.io/agon024/pen/KKBxNwx ) 上加載它時，它的功能就像它應該的那樣。

我已經禁用了所有插件，但它仍然可以。 我已經從腳本中刪除了所有其他 jQuery，它仍然可以。 我試過使用“jQuery”而不是“$”但什么也沒有。 我在另一個網站上使用這個入門主題，沒有問題。

重要- 如果我取消注釋“警報”行，我會看到它正在不停地循環“if”和“else”語句。 當我單擊“mobileBtn”時，它會添加 class“animate__zoomIn”並彈出一個提示“2”，然后當我在警報上單擊“確定”時，它會立即刪除 class“animate__zoomIn”並添加 class“animate__zoomOut”，設置內聯樣式在 1000 毫秒后顯示為“無”，並彈出一條警告“1”，當我單擊“確定”時，它停止了。

有人知道發生了什么事嗎？ 就像我說的，即使滿足“else”條件，它似乎也在循環“if”和“else”語句。 這是我第一次遇到這個問題，看到它在 codepen 上工作，它一定與 WordPress 有關。

Answer 1

這應該按需要工作。

 $('.mobileNav').addClass('animate__zoomOut').hide(); $('.mobileBtn').click(function(){ $('.mobileNav').show(); if ($(this).hasClass('btnNotActive')) { $(this).toggleClass('btnActive btnNotActive'); $('.mobileNav').toggleClass('animate__zoomIn animate__zoomOut'); } else { $('.mobileNav').toggleClass('animate__zoomIn animate__zoomOut'); $(this).toggleClass('btnActive btnNotActive'); } $(this).css('pointer-events', 'none'); setTimeout(function(){ $('.mobileBtn').css('pointer-events', 'auto'); }, 1000); });

 .mobileNav { background-color: red; width: 400px; height: 400px; }.mobileBtn { display: inline-block; padding: 10px 50px; background-color: blue; color: white; width: auto; margin: 0 auto; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script> <div class="mobileBtn btnNotActive show-for-small-only"> Click Me </div> <div class="mobileNav animate__animated"> <div class="mobileNavInner"> <?php joints_off_canvas_nav(); ?> </div> </div>