Как получить последний дочерний элемент для каждого элемента в массиве, а затем показать их, если они нажали на

Question

Так что в настоящее время с помощью этого кода с помощью щелчка мышью я могу открыть пункты подменю.

Проблема заключается в том, что при нажатии на один из пунктов выпадающего меню они все открываются, но ятолько те, на которые я нажимаю, открывают не все.

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 версией этого элемента. Вы можете использовать jQuery для добавления и удаления классов, а также для добавления и удаления стилей, а также для поиска элементов, которые являются родительскими или дочерними для выбранного вами элемента.

Например, если вы хотите найти 'обертку подменю', которая является родителем выбранного в данный момент элемента, внутри функции, которую вы напишите var subMenu = $(this).closest('.sub-menu-wrap'), а затем оттуда вы можете проверять и изменять стили и классы

jQuery облегчит вашу жизнь. На каждый ваш вопрос в Интернете уже есть миллион ответов.