How to fix a bug in a simple javascript menu script?

Question

JavaScript

The menu does not work correctly, namely, when I click on the anchor link on the first anchor link, it rises to the header, then the menu closes, but when I click the rest of the menu links, it goes over the menu anchor and then leaves back, that is, it is removed, then the class on the menu links is inserted again. here is the site a0237054.xsph.ru
please go look.

Here is the js script:

$('.open-button').click(function() 
{
        if(!$('.menu-button').hasClass('open-done'))
        {
            $('.menu-button').addClass('open-done');
            $('.menu-block-1').addClass('open-done');
            $('.nav').addClass('open-done');
            setTimeout(function(){$('.menu-block-2').addClass('open-done')}, 100);
            setTimeout(function(){$('.menu-link-1').addClass('open-done')}, 500);
            setTimeout(function(){$('.menu-link-2').addClass('open-done')}, 800);
            setTimeout(function(){$('.menu-link-3').addClass('open-done')}, 700);
            setTimeout(function(){$('.menu-link-4').addClass('open-done')}, 900);
            setTimeout(function(){$('.menu-link-5').addClass('open-done')}, 600);
            setTimeout(function(){$('.menu-link-6').addClass('open-done')}, 1000);

            setTimeout(function(){$('.menu-block-1').addClass('z_index')}, 100);
            setTimeout(function(){$('.menu-block-2').addClass('z_index')}, 200);
            setTimeout(function(){$('.nav').addClass('z_index')}, 200);
        }
        else
        {
            $('.menu-button').removeClass('open-done');
            $('.menu-link-1').removeClass('open-done');
            $('.nav').removeClass('open-done');
            setTimeout(function(){$('.menu-link-2').removeClass('open-done')}, 400);
            setTimeout(function(){$('.menu-link-3').removeClass('open-done')}, 300);
            setTimeout(function(){$('.menu-link-4').removeClass('open-done')}, 500);
            setTimeout(function(){$('.menu-link-5').removeClass('open-done')}, 200);
            setTimeout(function(){$('.menu-link-6').removeClass('open-done')}, 600);
            setTimeout(function(){$('.menu-block-1').removeClass('open-done')}, 800);
            setTimeout(function(){$('.menu-block-2').removeClass('open-done')}, 600);

            setTimeout(function(){$('.nav').removeClass('z_index')}, 1000);
            setTimeout(function(){$('.menu-block-1').removeClass('z_index')}, 1800);
            setTimeout(function(){$('.menu-block-2').removeClass('z_index')}, 1600);
        }
});

Answer 1

at least there is no preventDefault, respectively, the links will work as expected - follow the anchor. Otherwise, you are too lazy to read all this clutter, you just put something out of the classes in the wrong place, or you forget to remove it.

Answer 2

All found the cause of the bug. js and css, and the error was in html where it was on links, but prescribed classes for working with js, repeated the same classes on svg icons when I open the menu for active class icons, there are no links only, and when I click on the icon, the active class of the link is removed and assigned to the icon.
Thank you for your attention!