Блог

Главная - Вопросы по программированию - Скрыть каждое меню, открываемое сразу после щелчка по ссылке из него

Скрыть каждое меню, открываемое сразу после щелчка по ссылке из него

#javascript #html #css #typescript

#javascript #HTML #css #typescript

Вопрос:

Я создаю выпадающее меню вне боковой панели Canvas в vanilla JS. Почти в нижней части моего JS-кода я создал функцию для скрытия боковой панели с холста сразу после того, как кто-то нажимает ссылку href. Также я создал функцию для скрытия и отображения уровня скрытого подменю выпадающего меню, чтобы щелкнуть их. Но теперь мне нужна функция для закрытия каждого открытого выпадающего меню на боковой панели, когда пользователь нажимает ссылку href, непосредственно перед тем, как пользователь перейдет на другую страницу сайта. Затем, когда пользователь снова откроет меню, все выпадающие списки будут закрыты. ПРИМЕЧАНИЕ: ‘aTags’ — это имя переменной, которая указывает на каждый доступный для клика элемент href Любой совет будет очень полезен!

 const open = document.querySelector('.open');
let list_items = document.querySelectorAll('#subb');
let overlay = document.querySelector('.overlay');
let aTags = open.getElementsByClassName('ilink');



// Show and Hide sidebar when click icon
let toggles = document.querySelectorAll(".c-hamburger");

for (let i = toggles.length - 1; i >= 0; i--) {
  let toggle = toggles[i];
  toggleHandler(toggle);
};

function toggleHandler(toggle) {

  toggle.addEventListener("click", function(e) {
    e.preventDefault();
    if (this.classList.contains("is-active") === true) {
      this.classList.remove("is-active");
      open.classList.remove('oppenned');
      overlay.className = 'overlay';


    } else {
      this.classList.add("is-active");
      open.classList.add('oppenned');
      overlay.className  = ' open';
    }
  });

  window.addEventListener('click', function(event) {
    if (event.target === overlay) {
      toggle.classList.remove("is-active");
      open.classList.remove('oppenned');
      overlay.className = 'overlay';
    }
  });



  // hide sidebar off canvas when click a menu link
  for (let i = 0; i < aTags.length; i  ) {
    aTags[i].addEventListener("click", close);
  }

  function close(e) {
    e.stopPropagation();
    open.classList.remove('oppenned');
    toggle.classList.remove("is-active");
    overlay.className = 'overlay';


  }


  // Show and Hide the hidden Submenu ul
  for (let i = 0; i < list_items.length; i  ) {
    list_items[i].addEventListener("click", show);
  }

  function show(e) {

    e.stopPropagation();
    this.classList.toggle("myClass");
  }


} 
 .sub-menu ul ul {
  max-height: 0;
  position: relative;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s ease-out;
  background: white;
}

#subb.myClass>ul {
  max-height: 32em;
  visibility: visible;
  opacity: 1;
} 
 <nav id="nav" class="sub-menu open">
  <ul class="list-unstyled">
    <li id="subb">
      <a class="link">Soluciones</a>
      <ul>
        <li id="subb">
          <a class="link">Correo y herramientas colaborativas</a>
          <ul>
            <li><a class="link ilink" href="https://www.google.com/">Google Workspace</a></li>
            <li><a class="link ilink href=" https://www.google.com/ "">Google for Education</a></li>
            <li><a class="link ilink" href="https://www.google.com/">Microsoft 365</a></li>
          </ul>
        </li>


      </ul>