There is such a pseudo-code, when clicked, it shows my menu, but I want it to be hidden again when repeated, how can this be done?

<script> $('.header-menu-icon').click(function (){ $(".header-menu-link").css("display", "inline-block"); }); </script>
  • 2
    You can make two css classes .header-menu-link { display: none } and .header-menu-link.active { display: inline-block } and in jq instead of .css("display", "inline-block"); use .toggleClass('active'); - nicolaa
  • Yes, thanks, works) - Leonid Sizov

2 answers 2

You can use a variable that will change when you click on it and check whether the menu is open.

 let menuOpen = 0; $('.header-menu-icon').click(function() { if(menuOpen == 0) { menuOpen = 1; $(".header-menu-link").css("display", "inline-block"); } else if(menuOpen == 1) { menuOpen = 0; $(".header-menu-link").css("display", "none"); } }); 
 .header-menu-icon {display: block; width: 30px; height: 30px; background: gray; cursor: pointer;} .header-menu-link {display: none; width: 50px; height: 100px; background: red;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header-menu-icon"></div> <div class="header-menu-link"></div>

Or use classes (I like this option more).

 let menuOpen = 0; $('.header-menu-icon').click(function() { let hasClass = $('.header-menu-link').hasClass('active'); if(hasClass) $('.header-menu-link').removeClass('active'); else $('.header-menu-link').addClass('active'); }); /* Либо использовать вот такой код $('.header-menu-icon').click(function() { $('.header-menu-link').toggleClass('active'); }); */ 
 .header-menu-icon {display: block; width: 30px; height: 30px; background: gray; cursor: pointer;} .header-menu-link {display: none; width: 50px; height: 100px; background: red;} /* Добавим класс active */ .header-menu-link.active {display: block;} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="header-menu-icon"></div> <div class="header-menu-link"></div>

    Or something like this:

    I think that you can adjust the example to your needs.

     $('button').on('click', () => { $('.foo').toggle(); }); 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="foo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button>Toggle</button>