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

【问题标题】：How do I get the last element child for every item in an array and then show them if they are clicked on如何获取数组中每个项目的最后一个元素子元素，然后在单击它们时显示它们
【发布时间】：2019-10-20 00:51:24
【问题描述】：

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

希望有人能帮忙！

【问题讨论】：

你考虑过使用Event.target获取当前点击的item吗？ developer.mozilla.org/en-US/docs/Web/API/Event/target
我实际上没有，但我对如何实现这一点有点困惑，你能帮忙吗？
这是一个纯javascript下拉列表的示例codepen.io/dg1234uk/pen/wGyPRP
在你的上下文中你会使用类似Event.target.parentNode.toggle('closed')
这个 js 下拉菜单的问题是它只有一个菜单，而我的菜单中有大约 8 个不同的下拉菜单 staging.information-age.com

标签： javascript arrays wordpress drop-down-menu menu

【解决方案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");
}

【讨论】：

这样吗？ function myDropdown() { 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"); }

【解决方案2】：

所以你的问题是，imo，你可能不应该像那样决定 html 中的点击功能。

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

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

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

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

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

【讨论】：