[FIXED] How can i make a loop with jquery?

Issue

I made this in jquery, but it just works one time. How can i make a loop and fix it?

$(function() {

    $('.bar-menu').on().click(function() {
        $('.header-menu-mobile ul').css('display', 'block');
        $('.form_mobile .search-bar input').css('margin-top', '-297px');
        $('.header_mobile .form_mobile .icon-search').css('margin-top', '-283px');
        $('.header_mobile .form_mobile .bar-menu').css('margin-top', '-295px');
        $(this).off().click(function() {
            $('.header-menu-mobile ul').css('display', 'none');
            $('.form_mobile .search-bar input').css('margin-top', '-72px');
            $('.header_mobile .form_mobile .icon-search').css('margin-top', '-59px');
            $('.header_mobile .form_mobile .bar-menu').css('margin-top', '-67px');
        });
    });
});

Solution

off() will remove the on() event handler. Use flag variable instead of it.

$(function() {
    $('.bar-menu').on().click(function() {
        $(this).context.flag = !$(this).context.flag;
        if($(this).context.flag) {
            $('.header-menu-mobile ul').css('display', 'block');
            $('.form_mobile .search-bar input').css('margin-top', '-297px');
            $('.header_mobile .form_mobile .icon-search').css('margin-top', '-283px');
            $('.header_mobile .form_mobile .bar-menu').css('margin-top', '-295px');
        } else {
            $('.header-menu-mobile ul').css('display', 'none');
            $('.form_mobile .search-bar input').css('margin-top', '-72px');
            $('.header_mobile .form_mobile .icon-search').css('margin-top', '-59px');
            $('.header_mobile .form_mobile .bar-menu').css('margin-top', '-67px');
        }
    });
});

Answered By - pullidea-dev

Answer Checked By - Robin (PHPFixing Admin)