jQuery slideToggle - Loading Twice (Open - Then Close)

Question

I've built a site with a Mobile Navigation,

I'm using jQuery to do a slideToggle, But I have a few checks in place, To see if the user has opened the search bar / notifications bar, Then showing hiding so that you only see one of the items at a given time.

My jQuery code is as follows (I'll also provide a Fiddle)

$(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 have, Is the toggle works first time around, But when you click say the search-link, Then load the nav in. The slideToggle tries to do the animation twice (Open then Close)

A jsFiddle is here

Why would it be doing this? I can only assume my logic is wrong on this.

Answer 1

I modified line 39 of the JS with the .stop() and it works (I believe this is the behavior you want):

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

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

Ok, Here is the second attempt with removing the slideToggle() and using slideUp() and slideDown() functions in place of and it appears working at first glance but I do not think it is fully worked out after a couple 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 2

e.stopImmediatePropagation();

This will solve your problem.

Answer 3

Sometimes, jQuery actions run twice if they get called many times. That happens because there are some pending actions in the execution queue which disturb the actions flow.

So I suggest using clearQueue() method in the beginning of your click method, that will guarantee clearing any uncompleted actions before starting the execution of your logic.

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