时间戳

首页 > 解决方案 > 如何获取数组中每个项目的最后一个元素子元素，然后在单击它们时显示它们

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

问题描述

因此，目前使用带有 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函数动态生成的。

希望有人能帮忙！

标签： javascriptarrayswordpressdrop-down-menumenu

解决方案

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

推荐阅读