Как закрыть меню при клике на его пункт?

Question

[Сергей Миллер]

Привет, друзья!

Можете мне помочь с закрытием контейнера меню при клике на его пункт? Есть вот такая магия на 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.className = menuContOpened;
} 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 />[e-mail]</p>
</div></div>
<li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
</ul>
</nav>

Взято было с интернета потому, что сам в JS ни капли не силен; есть те, кто напишет как это можно воссоздать?) Как я понимаю нужно чтобы при клике на li.menu-container.opened к классу .menu-container добавлялся класс .closed вместо .opened, но я могу быть не прав здесь.

Answer 1

[Сергей Миллер]

Ответили на stackoverflow и работает все отлично:

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 />[e-mail]</p>
</div></div>
<li class="forcall"><span class="modal_btn">Заказать звонок</span></li>
</ul>
</nav>
</div>

Удачи всем!

Answer 2

[Максим Тимофеев]

1. Пример не самый лучший
2.

Взято было с интернета потому, что сам в JS ни капли не силен

Тогда надо почитать про js. Не только для этого примера. Без js или jquery сегодня никак.
3.

как это можно воссоздать

Что значит "воссоздать"? ctrl+c и ctrl+v

Comments

[Сергей Миллер]

Согласен без js сегодня никак. Пока у меня было очень мало практики. Не могу вот даже такую простую задачу решить, не поможете?

[Максим Тимофеев]

Сергей Миллер: https://jsfiddle.net/w6t0o5j8/