第二次单击菜单切换不起作用

Question

First click to open the menu works fine but the second one just doesn't work. I'm not a coder myself but I'm always trying to fix things myself. I have searched a lot for answers but I'm not even close to solve this. Your help would be very much appreciated

HTML

About Services Clients Contact

function openbox(){
        var d = document.getElementById("centralboxdiv");
        d.classList.remove("fadeOut");
        d.classList.remove("animated");
        d.className += " fadeIn animated";
        d.style.display = "flex";
        var d2 = document.getElementById("masthead"); 
        d2.style.display = "none";
        var d3 = document.getElementById("maincenterlogo"); 
        d3.style.display = "none";

        var d4 = document.getElementById("tempdcenterlogosmall");
        d4.classList.remove("fadeInUp");
        d4.classList.remove("animated");
        var d5 = document.getElementById("maincenterlogo");
        d5.classList.remove("fadeOutUp");
        d5.classList.remove("animated");
    }
    function closebox(){
        var d = document.getElementById("centralboxdiv");
        d.classList.remove("fadeIn");
        //d.classList.remove("animated");
        d.className += " fadeOut ";

        var d2 = document.getElementById("masthead"); 
        d2.style.display = "flex";
        var d3 = document.getElementById("maincenterlogo"); 
        d3.style.display = "flex";
        //d.style.display = "none";
    }

Javascript

 function openbox(){ var d = document.getElementById("centralboxdiv"); d.classList.remove("fadeOut"); d.classList.remove("animated"); d.className += " fadeIn animated"; d.style.display = "flex"; var d2 = document.getElementById("masthead"); d2.style.display = "none"; var d3 = document.getElementById("maincenterlogo"); d3.style.display = "none"; var d4 = document.getElementById("tempdcenterlogosmall"); d4.classList.remove("fadeInUp"); d4.classList.remove("animated"); var d5 = document.getElementById("maincenterlogo"); d5.classList.remove("fadeOutUp"); d5.classList.remove("animated"); } function closebox(){ var d = document.getElementById("centralboxdiv"); d.classList.remove("fadeIn"); //d.classList.remove("animated"); d.className += " fadeOut "; var d2 = document.getElementById("masthead"); d2.style.display = "flex"; var d3 = document.getElementById("maincenterlogo"); d3.style.display = "flex"; //d.style.display = "none"; } 

Thank you

Answer 1

It seems that in your HTML the menu toggle never gets a chance to call closebox function.

I suggest you to use a single toggle function (like the one in jQuery) to handle the toggle action, or some CSS trick.

If you insist on using one open function and one close function, you can try addEventListener .