时间戳

首页 > 解决方案 > 需要使用 Vanilla Javascript 隐藏/显示子菜单

javascript - 需要使用 Vanilla Javascript 隐藏/显示子菜单

问题描述

我有一个带有子菜单的列表项菜单，我需要在父点击时显示/隐藏。我在我网站的其他区域有这个工作，但我在选择这个元素以使其工作时遇到问题。

click 元素也是我需要防止默认或禁用的链接，以便子菜单显示。

我需要能够点击父链接来隐藏/显示子菜单

谢谢你。

HTML：

<ul id="main-menu" class="main-nav-list uppercase">
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-4356">
<a href="//localhost:3000/about/" aria-current="page">About</a>
<ul class="sub-menu">
    <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-16 current_page_item menu-item-4420"><a href="//localhost:3000/about/" aria-current="page">About</a></li>
    <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4421"><a href="//localhost:3000/about/management/">Leadership</a></li>
</ul>
</li>
</ul>

Javascript：

var mobileSub = document.querySelectorAll("menu-item a");
var i;

for (i = 0; i < mobileSub.length; i++) {
  mobileSub[i].addEventListener("mouseenter", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}

标签： javascript

解决方案

我认为您的 javascript 代码不会影响您的问题。答案将是这样的：

document.querySelectorAll('.menu-item').forEach((it) => {
  it.addEventListener('click', (ev) => {
     ev.preventDefault();
     it.querySelector('.sub-menu').classList.toggle('hidden');
  });
});

推荐阅读