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

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

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

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

多谢各位

HTML:

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";
    } 
  });
}

var mobileSub=document.queryselectoral（“菜单项a”）；
var i；
对于（i=0；i

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

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

---

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

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

---

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

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

---

检查工作示例。

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

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

---

检查工作示例。

因此，在Nemiro、alx和Douglas p的帮助下，我能够完成以下工作：

JS:

var mobileSub=document.queryselectoral（“.menu项a”）；
var i；
对于（i=0；i

---

这是在手机宽度的标准WordPress菜单上使用的。

因此，在Nemiro、alx和Douglas p的帮助下，我能够做到这一点：

JS:

var mobileSub=document.queryselectoral（“.menu项a”）；
var i；
对于（i=0；i

---

这是在手机宽度的标准WordPress菜单上使用的。

1）您需要在类选择器中添加一个点：

var mobileSub=document.queryselectoral（“.menu item a”）

——否则它将搜索

元素，而不是

；2） 您的代码似乎没有点击处理等，您要求为您编写吗？mouseenter应该是“点击”。我明白了，我没有添加点。这可能就是问题所在！1） 您需要在类选择器中添加一个点：

var mobileSub=document.queryselectoral（“.menu item a”）

——否则它将搜索

元素，而不是

；2） 您的代码似乎没有点击处理等，您要求为您编写吗？mouseenter应该是“点击”。我明白了，我没有添加点。这可能就是问题所在！