I have a mega-menu-dropdown which has 2 columns. Column 1 has a list of terms and by hovering on the terms (mouse-in) the corresponding div should become visible.
Also the first combination of list-item and corresponding div should be visible when entering the dropdown.
This is what I have so far:
document.addEventListener("DOMContentLoaded", function(event) {
let ktnavList = document.querySelector(".mm-dropdown--nav").children;
let ktcatList = document.querySelector(".mm-dropdown--cat").children;
for (let i=0; i<ktnavList.length; i++) {
let li = ktnavList[i];
let cat = ktcatList[i];
li.addEventListener('mouseenter', () => {
cat.classList.toggle('active-item');
});
li.addEventListener('mouseleave', () => {
cat.classList.toggle('active-item');
});
};
});
I can toogle all items except the first one.
I need the first div to hide when hovering on the second list-item but to become visible again when entering the dropdown again (that should be the standard state of the dropdown).
I also think I don’t need the ‘mouseleave’ part. Because it will prevent the user to access the contents of the divs (more navigation elements).
Desired behavior would be that if I hover above one list item all the other divs belonging to the other list-items would hide (toogle class ‘active-item’).
I don’t know how to toggle all other divs that are not attached to the ‘mouseenter’.
Thanks in advance.