Как автоматически скрыть бургер меню при нажатии на якорь?

Question

[Antanid]

Здравствуйте.
При нажатии на якорь происходит перемещение к контенту, но бургер меню так и остается закрытым. Это мой первый экспирианс с бургер меню, не совсем понимаю логику действий. Буду рад помощи или совету.

https://codepen.io/antanid/pen/mdpLqWE

<div class="nav">
<div class="menu__body">
<ul id='321' class="nav__ul">
<li id="132"><a class="popup_open" href="#our_routes_h2">Маршруты</a></li>
<li id="132"><a class="popup_open" href="#photo__h2">Галерея</a></li>
<li id="132"><a class="popup_open" href="#questions__head">Вопрос-Ответ</a></li>
<li id="132"><a class="popup_open" href="#contacts__h3">Контакты</a></li>
<li id="132"><a class="popup_open" href="" class="popup_open">Забронировать</a></li>
  </ul>

 <div class="nav__number">
        <div class="number__call">
        <p class="number__p"><img src="img/phone.png" alt="phone">[phone]</p>
        <button class="number__button">Перезвоните мне</button>
      </div>
          </div>
            </div>

    <div class="menu__icon">
        <span></span>
      </div>

        </div>

.menu__icon {
        z-index: 10;
        display: block;
        position: relative;
        width: 30px;
        height: 18px;
        cursor: pointer;
        margin: 30px;
    }
    .menu__icon::before,
    .menu__icon::after,
    .menu__icon span {
        left: 0;
        position: absolute;
        height: 10%;
        width: 100%;
        transition: all 0.3s ease 0s;
        background-color: black;
    }
    .menu__icon::before,
    .menu__icon::after {
        content: "";
    }
    .menu__icon::before {
        top: 0;
    }
    .menu__icon::after {
        bottom: 0;
    }
    .menu__icon span {
        top: 50%;
        transform: scale(1) translate(0px, -50%);
    }
    .menu__body {
        position: fixed;
        top: 0;
        left: -110%;
        width: 100%;
        height: 100%;
        background: rgba(18, 18, 20, 0.938);
        padding: 80px 30px 30px 0px;
        transition: all 0.3s ease 0s;
        overflow: auto;
    }
    .menu__body._active {
        left: 0;
        z-index: 10;
    }
    .nav__ul a {
        border-bottom: 0.5px solid rgba(255, 255, 255, 0.3);
        padding-left: 0;
        display: block;
        margin-top: 20px;
        font-size: 16px;
    }
    body._lock {
        overflow: hidden;
    }
    .menu__icon._active span {
        transform: scale(0) translate(0px, -50%);
    }
    .menu__icon._active::before {
        top: 50%;
        transform: rotate(-45deg) translate(0px, -50%);
    }
    .menu__icon._active::after {
        bottom: 50%;
        transform: rotate(45deg) translate(0px, 50%);
    }

const iconMenu = document.querySelector('.menu__icon');

if (iconMenu) {
    const menuBody = document.querySelector('.menu__body');
    iconMenu.addEventListener('click', function (e) {
        document.body.classList.toggle('_lock');
        iconMenu.classList.toggle('_active');
        menuBody.classList.toggle('_active')
    })
}

Answer 1

[maxonlinux]

Засовываешь тогглы в функцию menuToggle, чтоб было проще и чтоб код был чище и делаешь так:

const iconMenu = document.querySelector('.menu__icon');
const menuBody = document.querySelector('.menu__body');

function menuToggle() {
  document.body.classList.toggle('_lock');
  iconMenu.classList.toggle('_active');
  menuBody.classList.toggle('_active');
  if (menuBody.classList.contains('_active')) {
    menuBody.addEventListener ('click', function(e) {
    if (e.target.tagName == 'A') {
      menuToggle()
    }
  }, { once: true })
  }
}

iconMenu.addEventListener('click', menuToggle)

Comments

[Antanid]

Спасибо большое)

[maxonlinux]

Antanid, поправочка: once: true здесь для того, чтобы слушать событие один раз, а потом удалять, чтобы оно не висело в памяти. Только работает оно тут неправильно. Вместо того, чтобы детектить клики только по ссылам, оно детектит все клики и потом удаляется, это мой косяк. Значит при нажатии на пустую область листенер будет удаляться и по нажатию потом на ссылку ничего не будет происходить. Лучше записать функцию так:

function menuToggle() {
  document.body.classList.toggle('_lock');
  iconMenu.classList.toggle('_active');
  menuBody.classList.toggle('_active');
  if (menuBody.classList.contains('_active')) {
    menuBody.addEventListener ('click', function menuClose(e) {
    if (e.target.tagName == 'A') {
      menuToggle()
      menuBody.removeEventListener ('click', menuClose)
    }
  })
  }
}

Чуть больше кода, зато листенер не будет висеть в памяти, когда он не нужен. Когда он один такой - это не страшно, но когда их много по всей странице, то лучше удалять.