Javascript 如何在没有jquery的情况下创建切换下拉菜单

我在大多数实践中都避免使用jquery，这样我就可以熟悉javascript了，但我在试图让子菜单正确切换到转换时遇到了一些麻烦。 我的原始代码示例：

var submenu = document.getElementById('sub-menu');
function toggleMenu() {
  if (submenu.style.display == "none") {
    submenu.style.display = "block";
  }
  else {
    submenu.style.display = "none";
  }
};

工作，但它的低效率使它无法使用，也不可重复使用，因为它只在每个菜单上工作，并且必须为下一个菜单重新分配id/类

我的下一个想法是在单击

项有子项时使用事件处理程序进行单击，但我不确定如何定位单击菜单的子菜单

任何建议或重定向都将不胜感激。
您可以通过使选择器尽可能通用，使jQuery函数可重用。两级菜单具有
，其中包含
。我们可以通过使用选择器来利用这一点：

$('li:has(ul)').on('click', function() {
    $(this).find('ul').toggle();
});

也看到这个

这个脚本很小，可以在您的其他站点上使用。
我的答案基于JSFIDLE上的代码。它与问题中的代码不同，但都包含一些JavaScript和CSS错误。例如：


document.getElementsByClassName
返回一个数组，但您尝试在它返回对象时使用它
当您将切换应用于外部
li
时，它甚至会在您单击内部列表时生效（虽然这可能是出于设计，但在
a
上效果更好）
所选子菜单的CSS应为
.sub menu.selected
，而不是
.sub menu.selected
（带空格）
显示
不支持转换（至少还不支持afaik）

我已经修改了这些内容，下面是您想要的简单JavaScript代码示例：


//获取包含所有链接的数组，并通过绑定click事件遍历它
var allhaschilds=document.queryselectoral（“.item有子项a”）；
对于（var x=0；x

。子菜单{
显示：无；
}
。子菜单。已选定{
显示：块；
转变：转变2；
}





















JavaScript不仅仅是简单的DOM操作。如果您真的想学习，我的建议是使用jQuery。它只有96 Kb（以今天的互联网速度算不上什么），很可能已经缓存在浏览器中了，而且已经过验证。这会让战术细节不受干扰，至少让你继续构建一些重要的东西。如果你试图重新发明这个轮子，你会发现随着时间的推移，你正在构建自己的jQuery版本，只是性能更低，bug更多。这一点可以帮助你：如果OP不想使用jQuery，他/她可能有理由（好的或坏的）不使用它，那么为什么要强迫OP使用它呢？为什么特别是jQuery而不是另一个？你会有人说使用jQuery是疯狂的，因为xyz比jQuery好（用d3.js、AngularJS、Dojo、kendoui、MooTools或任何你想选择的毒药代替xyz），谢谢。这正是我想要的，现在我可以学习代码来理解它。我选择使用w/javascript的原因是，在不同的框架和产品之间进行转换时，它似乎更兼容，因此我了解到，我从中获得了更多的好处。OP明确表示，他们正在避免jQuery。