Question

因此，当前使用此代码并带有onclick，我可以打开子菜单项。

问题是，当我单击其中一个项目以下拉菜单时，它们全部打开，但我只希望单击的项目不能全部打开。

function myDropdown() {
var arr = Array.from(document.getElementsByClassName('sub-menu-wrap'));
for (let el of arr) {
    var x = el.lastElementChild;
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
}

如果您在这里https://staging.information-age.com/并查看右边带有图标的第三个菜单，这是我正在使用的菜单，因此您可以更好地理解我的意思。

要添加此菜单，是由Wordpress使用wp_nav_menu函数动态生成的。

希望有人可以提供帮助！

Answer 1

onclick处理程序应类似于

let all = Array.from(document.getElementsByClassName('sub-menu-wrap'));

// current or "this" if you use onclick, 2 is the offset of the clicked menu item, just for testing
let current = all[2]; // change all[2] to this

for (let el of all) {
  el.querySelector(".sub-menu").style.display = (el === current ? "block" : "none");
}

Answer 2

因此，您的问题是imo，您可能不应该这样决定html中的click函数。

在我看来，该网站上已经安装了jQuery，那么为什么不使用它来简化事情呢？您想为<i>元素分配一个点击，如下所示：

$('#ib-menu i').click(function() { /* do your work in here*/ });

在函数内部，this是当前单击的元素，而$(this)是该元素的jQuery选择版本。您可以使用jQuery添加和删除类，添加和删除样式以及查找作为所选元素的父元素或子元素的元素。

例如，如果要查找当前选定元素的父级的“ sub-menu-wrap”，则可以在函数内编写var subMenu = $(this).closest('.sub-menu-wrap')，然后从此处检查并修改样式和类

jQuery将使您的生活更加轻松。您遇到的每个问题也将在互联网上获得一百万个答案。

如何获得数组中每个项目的最后一个元素子项，然后在单击它们时显示它们

2 个答案: