How to close the menu when clicking on its item?

Question

JavaScript

Hi friends!

Can you help me with closing the menu container when clicking on its item? There is such magic in js.

var menuBtn = document.getElementById('menuBtn');
var menuContainer = document.getElementById('menuContainer');
var menuIconClosed = "menu-icon closed"; //class name for closed button
var menuIconOpened = "menu-icon opened"; //class name for opened button
var menuContClosed = "menu-container closed"; //class name for closed menu
var menuContOpened = "menu-container opened"; //class name for opened menu

menuBtn.onclick = function() {
if (menuBtn.className == menuIconClosed) {
menuBtn.className = menuIconOpened;
menuContainer.
} else if (menuBtn.className == menuIconOpened) {
menuBtn.className = menuIconClosed;
menuContainer.className = menuContClosed;
}
}
HTML

<span class="menu-icon closed" id="menuBtn"></span>

<div class="showMenu">Меню</div>
<nav class="menu-container closed" id="menuContainer">
<ul>
<li><a href="#gototop">Главная</a></li>
<li><a href="#ourservices">Услуги агентства</a></li>
<li><a href="#aboutus">О нас</a></li>
<li class="liNoAfter"><a href="#callus">Контакты</a></li>
<div class="myCellMobile">
<div class="myCellMargin">
<i class="fa fa-map-marker myFa"></i>
<p><span>г. Усть-Лабинск, ул.Октябрьская, 78</span><br />г. Краснодар, ул. Ставропольская 312 офис 8</p>
</div></div>
<div class="myCellMobile">
<div class="myCellMarginPhone">
<i class="fa fa-phone"></i>
<p class="ios_reset"><span class="nonono">[phone]</span><br />[email protected]</p>
</div></div>
<li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
</ul>
</nav>

It was taken from the Internet because he himself is not a bit strong in JS; there are those who write how it can be recreated?) As I understand it, when you click on li.menu-container.opened, the .closed class is added to the .menu-container class instead of .opened, but I may be wrong here.

Answer 1

Answered on stackoverflow and everything works fine:

var menuBtn = document.getElementById('menuBtn');
//Находим наш блок с меню
var menu = document.getElementById('menu');
var menuContainer = document.getElementById('menuContainer');
var menuIconClosed = "menu-icon closed"; //class name for closed button
var menuIconOpened = "menu-icon opened"; //class name for opened button
var menuContClosed = "menu-container closed"; //class name for closed menu
var menuContOpened = "menu-container opened"; //class name for opened menu
//Вешает клики на документ
//Проверяемклики в обертке для меню
menu.onclick = function(e) {
    //Проверяем объект клика - если кнопка меню запускаем функцию
    if(e.target ==  menuBtn) closeOrOpenMenu();
    //Если клик был не на ссилке не делаем ничего
    if(e.target.tagName != 'A') return;
    else closeOrOpenMenu();//Иначе закрываем меню
    
    //Функция для удобства
    function closeOrOpenMenu(){
      if (menuBtn.className == menuIconClosed) {
          menuBtn.className = menuIconOpened;
          menuContainer.className = menuContOpened;
      } else if (menuBtn.className == menuIconOpened) {
          menuBtn.className = menuIconClosed;
          menuContainer.className = menuContClosed;
      }
     }
}

<!--Сделаем обертку для меню чтобы проверять клики только в ней-->
<div id="menu">
<span class="menu-icon closed" id="menuBtn"></span>

<div class="showMenu" id="menu"menu>Меню</div>
<nav class="menu-container closed" id="menuContainer">
<ul>
<li><a href="#gototop">Главная</a></li>
<li><a href="#ourservices">Услуги агентства</a></li>
<li><a href="#aboutus">О нас</a></li>
<li class="liNoAfter"><a href="#callus">Контакты</a></li>
<div class="myCellMobile">
<div class="myCellMargin">
<i class="fa fa-map-marker myFa"></i>
<p><span>г. Усть-Лабинск, ул.Октябрьская, 78</span><br />г. Краснодар, ул. Ставропольская 312 офис 8</p>
</div></div>
<div class="myCellMobile">
<div class="myCellMarginPhone">
<i class="fa fa-phone"></i>
<p class="ios_reset"><span class="nonono">[phone]</span><br />[email protected]</p>
</div></div>
<li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
</ul>
</nav>
</div>

Good luck everyone!

Answer 2

1. The example is not the best
2.

It was taken from the Internet because I myself am not a bit strong in JS

Then you need to read about js. Not just for this example. Without js or jquery today in any way.
3.

how can it be recreated

What does "recreate" mean? ctrl+candctrl+v