通过使用 JS 将鼠标悬停在相应的导航项上来控制 div 的可见性

Question

我有一个大型菜单下拉菜单，有 2 列。第 1 列有一个术语列表，将鼠标悬停在术语上（鼠标移入），相应的 div 应该可见。

进入下拉菜单时，列表项和相应 div 的第一个组合应该可见。

这是我到目前为止所拥有的：

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

我可以切换除第一个之外的所有项目。 我需要第一个 div 在悬停在第二个列表项上时隐藏，但在再次进入下拉列表时再次可见（这应该是下拉列表的标准状态）。

我还认为我不需要“鼠标离开”部分。因为它会阻止用户访问 div 的内容（更多导航元素）。

期望的行为是，如果我将鼠标悬停在一个列表项上方，则属于其他列表项的所有其他 div 将隐藏（toogle 类“active-item”）。

我不知道如何切换所有其他未附加到“mouseenter”的 div。

提前致谢。

Answer 1

我自己解决了。

如果有人感兴趣，这是我的解决方案：

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', () => {
        let catItems = document.querySelector(".mm-dropdown--cat").children;
        let listItems = document.querySelector(".mm-dropdown--nav").children;
          for (let i=0; i<catItems.length; i++) {  
            catItems[i].classList.remove("nav-cat--item-active");
            catItems[i].classList.add("nav-cat--item");
            listItems[i].classList.remove("nav-list--item-active");
          };
        
      li.classList.add('nav-list--item-active');  
      cat.classList.add('nav-cat--item-active');
      });
   };
});