javascript - 隐藏单击其中的链接后打开的每个菜单

Question

我正在香草 JS 中制作 Off Canvas 侧边栏下拉菜单。几乎在我的 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>

标签： javascripthtmlcsstypescript