JQuery slideToggle - Download twice (Open - Then Close)

Question

I created a site with mobile navigation,

I use jQuery to create a slide, but I have a few checks in place. To find out if the user has opened the search / notification panel. Then the hiding is shown, so that you see only one of the elements for a given time.

My jQuery code is as follows (I also provided a script)

$(document).ready(function() { // Mobile Nav Toggle... $('.nav-toggle').click(function() { // // Check If Other Items Are Open.... if($('.mobile-search-form:visible')) { $('.mobile-search-form').hide(); } // // Check If Other Items Are Open.... if($('.mobile-notifications:visible')) { $('.mobile-notifications').hide(); } $('nav').slideToggle(); accordion_links(); return false; }) // Add a Chevron Class To Links (For Mobile Nav)... $(function() { $('nav ul li a').each(function() { if ( $(this).parent('li').children('ul').size() > 0 ) { $(this).addClass('chevron-down'); } }); }); function accordion_links() { $('.chevron-down').click(function() { $(this).next('ul.sub-nav').slideToggle(); if($(this).parent('li').hasClass('open')) { $(this).removeClass('chevron-up'); $(this).addClass('chevron-down'); $(this).parent('li').removeClass('open'); } else { $(this).removeClass('chevron-down'); $(this).addClass('chevron-up'); $(this).parent('li').addClass('open'); } }) } // Toggle Search Form (On Mobile).... $('.search-link').click(function() { // Check If Notifications / Search Form Are Visible... if($('nav:visible')) { $('nav').slideUp(); } if($('.mobile-notifications:visible')) { $('.mobile-notifications').hide(); } $('.mobile-search-form').slideToggle(); return false; }) // Toggle Notifications On Mobile... $('a.notifications').click(function() { // Check If Notifications / Search Form Are Visible... if($('nav:visible')) { $('nav').hide(); } if($('.mobile-search-form:visible')) { $('.mobile-search-form').hide(); } $('.mobile-notifications').slideToggle(); return false; }) // Close Notification Block $('.close-notification').click(function() { $('.notification').fadeOut(); }) }) 

The problem I encountered is whether the switch first fires, but when you click on the search link, then load the navigator. The slideToggle method tries to make an animation twice (Open, then Close)

A jsFiddle is here

Why do this? I can only assume that my logic is wrong in that.

Answer 1

Sometimes jQuery actions are executed twice if they are called many times. This is because there are some pending actions in the execution queue that interfere with the flow of actions.

Therefore, I suggest using the clearQueue () method at the beginning of your click method, which guarantees the release of any pending actions before running your logic.

Here's the documentation of the clearQueue () method https://api.jquery.com/clearQueue/

Answer 2

I changed the 39 JS line with .stop() and it works (I believe this is your behavior):

 $(this).next('ul.sub-nav').stop().slideToggle(); 

https://jsfiddle.net/hc8cad7c/1/

So, here is the second attempt to remove slideToggle() and use the slideUp() and slideDown() functions instead, and it appears at first glance, but I don’t think it is fully developed after a few clicks ...

Here are the lines I changed:

 function accordion_links() { $('.chevron-down').click(function() { if($(this).parent('li').hasClass('open')) { $(this).removeClass('chevron-up'); $(this).addClass('chevron-down'); $(this).parent('li').removeClass('open'); $(this).next('ul.sub-nav').slideUp(); } else { $(this).removeClass('chevron-down'); $(this).addClass('chevron-up'); $(this).parent('li').addClass('open'); $(this).next('ul.sub-nav').slideDown(); } }) } 

And the fiddle: https://jsfiddle.net/hc8cad7c/2/

Answer 3

Update The delegated function changes it:

 $('.chevron-down').click(function() 

for this:

 $(document).on("click",'.chevron-down', function() 

Work better on ajax.

Answer 4

Try using slideToggle mode in else because you only have conditions without others, and it always tries to make an animation.

And, optionally, the comment returns false ;, I had problems with this line, because sometimes switching does not work.