Закрытие мобильного меню при нажатии на ссылку в hid

Question

На моем веб-сайте есть мобильное меню, которое отображается при нажатии кнопки. Отображение и скрытие меню прекрасно работает, когда я нажимаю эту кнопку с кодом ниже:

Но я также хочу скрыть меню, когда нажимаю на ссылку в этом меню. Как мне это сделать?

var coll = document.getElementsByClassName("hamburger");
var i;
for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var mobilemenuspace = this.nextElementSibling;
    if (mobilemenuspace.style.display === "block") {
      mobilemenuspace.style.display = "none";
    } else {
      mobilemenuspace.style.display = "block";
    }
  });
}

Answer 1

Добавьте прослушиватели событий для каждой из ссылок. Код может выглядеть примерно так:

Обратите внимание, для меня код ниже громоздок и местами неясен или небезопасен, , что хорошо , это хорошее начало. JQuery может сделать вещи немного лучше, но это будет лучше в React или Vue.

const toggleMenu = () => {
  const menu = document.getElementsByClassName("the-list")[0];
  if (typeof menu === "undefined" || typeof menu === "null") {
    throw new Error("menu element not found");
  };

  const isHidden = menu.classList.contains("hidden");
  if (isHidden) {
    menu.classList.remove("hidden");
  } else {
    menu.classList.add("hidden");
  };
};

const button = document.getElementById("the-button");
button.addEventListener("click", toggleMenu);

const links = document.getElementsByClassName("a-link");
for (link of links) {
  link.addEventListener("click", toggleMenu);
};

.hidden {
  display: none;
}

<ul class="the-list hidden">
  <li class="a-link"><a href="#">link 1</a></li>
  <li class="a-link"><a href="#">link 2</a></li>
</ul>
<button id="the-button">toggle menu</button>

Answer 2

Вы можете добавить eventLister к каждой вашей ссылке и затем вызвать:

function onLinkClick() {
  var coll = document.getElementsByClassName("hamburger");
  coll.classList.remove("active");
}