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

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 中的点击功能。

在我看来，该站点已经安装了 jQuery，那么您为什么不用它来简化操作呢？您想要将点击分配给 <i> 元素，如下所示：

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

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

例如，如果你想找到作为当前所选元素的父元素的 'sub-menu-wrap'，你可以在函数内部编写 var subMenu = $(this).closest('.sub-menu-wrap') 然后，你可以从那里检查和修改样式和类

jQuery 会让你的生活更轻松。您提出的每个问题在互联网上也会有上百万个答案。

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

How do I get the last element child for every item in an array and then show them if they are clicked on

javascript

arrays

wordpress

menu

drop-down-menu