jQuery 代码段在 WordPress 网站上不起作用

Question

WordPress Version - 6.3.1

Theme - JointsWP (blank starter theme)

jQuery Version - 6.3.3 (tried 6.3.1 also)

Website Link - https://legiondesigns.com/dev/labella/

EDIT : There are NO console errors either

I seem to be having a problem on my WordPress site. When running a jquery script in codepen.io everything functions properly. I AM using this code snippet on another site that I have designed years ago and it works fine using jQuery 6.3.1 but When running that code through my website it is not function properly at all.

Code snippet in question:

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');
  }
});
}); 

When I load this up on codepen.io ( https://codepen.io/agon024/pen/KKBxNwx ) it functions like it should.

I have disabled all the plugins and it still does it. I have removed all other jQuery from the script and it still does it. I have tried using "jQuery" instead of "$" and nothing. I am using this starter theme on another site and it doesn't have a problem.

IMPORTANT - If I uncomment the "alert" lines I see that it is looping through the "if" and "else" statements without stopping. When I click "mobileBtn" it adds the class "animate__zoomIn" and pops up an alert saying "2" then when I click OK on the alert it instantly removes the class "animate__zoomIn" and adds the class "animate__zoomOut", sets the inline style to "display: none" after 1000ms and pops up an alert saying "1" and when I click OK it stops.

Anyone know what is going on? Like I said it seems to be looping throught the "if" and "else" statements even when the "else" condition is met. This is the first time I have encountered this and seeing as it works on codepen it must have something to do with WordPress.

Answer 1

This should work as desired.

 $('.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>