Question

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

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

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

谢谢。

HTML：

while (true) {
    while (receivedRequest) {
         trigger = false;
         //do s.th.
    }
}

Javascript：

<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>

Answer 1

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

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

Answer 2

i.Nemiro提供的解决方案在我的测试中不起作用，因此对其进行了一些调整。

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

查看工作示例here。

Answer 3

因此，在Nemiro，alx和Douglas P的帮助下，我得以完成这项工作：

JS：

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

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

这是在移动宽度上用于标准WordPress菜单上的。

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

3 个答案: