Function show/hide responsive menu

Function show/hide responsive menu

Hello everyone,

First of all, I wish you a happy New Year!

I try to create my function through jquery in order to display and hide a menu when I am in mobile format.
However, after several different tests, I can display the menu but not hide it.
There is my HTML code :

<header class="header">
            <div id="menu-content">
                <a id="menu-icon" class="menu-close"><img class="menu-icon" src="img/bar-menu.png" alt="menu" /></a>
                <ul class="menu" id="menu">
                    <a id="btn-home" href="#home"><li>HOME</li></a>
                    <a id="btn-about" href="#about"><li>ABOUT</li></a>
                    <a id="btn-portfolio" href="#portfolio"><li>PORTFOLIO</li></a>
                    <a id="btn-contact" href="#contact"><li>CONTACT</li></a>
                </ul>
            </div>
</header>

My "#menu-icon" by default has the class "menu-close"
Here is the CSS code on the "menu-icon" menu as well as my header:

@media only screen and (max-width: 775px) {
     .header {
        z-index: 10000;
        overflow: hidden;
    }
   
    #menu-icon {
        display: block;
        width: 40px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
        cursor: pointer;
    }
}

(it is by default in .hidden)
and finally my js (jquery) code :

$(document).ready(function() {
    var iWindowsSize = $(window).width();
    if (iWindowsSize < 775 && $("#menu-icon").hasClass("menu-close")){
        $(document).on('click', ".menu-close", function() {
            console.log("i go into close");
            $(".menu-icon").attr('src', "img/close-menu.png");
            $(".header").css({
                overflow : 'visible',
            });
            $("#menu-icon").addClass("menu-open").removeClass("menu-close");
        });
    }
    if (iWindowsSize < 775 && $("#menu-icon").hasClass("menu-open")){
        $(document).on('click', ".menu-open", function() {
            console.log("i go into open");
            $(".menu-icon").attr('src', "img/bar-menu.png");
            $(".header").css({
                overflow : 'hidden',
            });
            $("#menu-icon").addClass("menu-close").removeClass("menu-open");
        });
    }
});



So I would like that when I click on my "hamburger menu" icon (so with the "menu-close" class), the hamburger icon turns into icon "cross", that the menu opens (so overflow: visible ) And, conversely, when I click on the "cross" icon (so with the class ".menu-open"), the icon returns to hamburger and the menu (.header) returns to overflow: hidden)
I noticed that when I click on my button with the class "menu-close", the first function is looped, while logically it should go to the next "if" loop since I change the class ".menu -open " !
Having tried to debug it through "console.log (" I go into open");" And "console.log (" I go into close");" I also noticed in the console that the first click on the menu, the "I go into close" appears 2 times!

Thank you in advance for the possible help that you can bring me ...!

Thanks!