CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Raj
Raj

Reputation: 370

Unable to repeat click event

This is basically a menu toggle feature which I want to repeat but can't achieve the intended unless I refresh the page. Clicking on .fa-bars adds class .animate to body which slides in the menu from the left, when the menu is visible clicking anywhere outside the menu area, it hides the menu as well as removes the class.animate from body.

This only works once then I refresh the page.

Any help in this regard will be appreciated

jQuery code

$(document).ready(function() 
{
    $(document).on('click', function() 
    {
        if($('body').hasClass('animate')) 
        {
             $('body.animate').on('click', function() 
             {
                  $(this).removeClass('animate');
             });
        } 
        else 
        {
             $('.fa-bars').on('click', function() 
             {
                  $('body').addClass('animate');
             });
        }
    });
});

Upvotes: 0

Views: 61

Answers (1)

Akivamu
Akivamu

Reputation: 588

I think he want to close menu when click on body only. This code may help:

$(document).ready(function () {
    $('.fa-bars').on('click', function (evt) {
        $('body').addClass('animate');
        evt.stopPropagation();
    });

    $('body').on('click', function () {
        if ($('body').hasClass('animate')) {
            $('body').removeClass('animate');
        }
    });
});

Click on fb-bars to open menu

Click on body to close menu if already opened

Upvotes: 1

Related Questions