javascript - JS/CSS 问题 - Mouseenter 事件在隐藏父元素后不起作用

Question

我正在尝试使用 Javascript 实现两种效果: 1) 使页面左侧菜单中导航链接的描述在鼠标悬停在图标上时从左侧飞入，当鼠标不再在图标上时飞回飞出。 2) 让用户能够使用按钮隐藏菜单。

我在这个链接的 codepen 中有所有代码... https://codepen.io/anon/pen/JemLER

Effect #1 运行完美，直到菜单被 effect #2 隐藏。然后，当图标悬停时，描述将不再从左侧飞入。

我正在做的#1 的方法是使用 javascript 向元素添加或删除一个类，该元素使用 mouseenter 和 mouseout 事件监听器将其转换为页面左侧。

这里是javascript函数...

document.querySelector('.home-icon').addEventListener('mouseenter', () => {
    document.querySelector('.home-desc').classList.remove('side-menu__list-item-desc-hide');
    console.log('hover');
});

document.querySelector('.home-icon').addEventListener('mouseout', () => {
    document.querySelector('.home-desc').classList.add('side-menu__list-item-desc-hide');
});

这是隐藏元素的类。

.side-menu__list-item-desc-hide {
  transform: translateX(-10rem); 
}

对于 #2，我使用点击事件以类似的方式隐藏菜单。

javascript 代码是...

const foldBtn = document.querySelector('.side-menu__fold-btn');

let isHidden = false;

foldBtn.addEventListener('click', () => {

    if (isHidden == false) {
        sideMenu.classList.add('side-menu-hide');
        sideMenuList.innerHTML = '';
        isHidden = true;
        foldIcon.innerHTML = 'chevron_right'; 
    }
    else {
        sideMenu.classList.remove('side-menu-hide');
        isHidden = false;
        foldIcon.innerHTML = 'chevron_left';
        
        setTimeout(() => {
            sideMenuList.innerHTML = sideMenuListContent;
        }, 400); 
    }
});

CSS 类是...

.side-menu-hide {
  transform: translateX(-100%); 
}

任何可能导致问题的想法？

谢谢!

Answer 1

嗨，约翰，欢迎来到 SO。代码有点过于复杂，实际上有很多非常简单的解决方案。

整个按钮点击是文学这行代码:)

foldBtn.addEventListener('click', () => {
    sideMenu.classList.toggle('side-menu-hide');
});

尝试一下。错误消失了。我将在编辑中添加更多链接和进一步说明。

MDN: Element.classList

Element.classList.toggle 是一个非常有用的函数，它可以为您节省许多代码行，并避免一些潜在的调试麻烦。 IT 基本上与您使用 add 和 remove 所做的完全相同。 “技巧”是它会检查该类(class)是否适合您。所以你不必写 if/else 语句。如果没有类，它将添加它。反之亦然。 有了这些新知识，您能想出重构其余代码的方法(提示:图标的类)吗？

编辑 - 错误的解释 您已将 ul 的完整子项硬编码到一个字符串中，并将其存储在名为 sideMenuListContent 的 const 中。当你第一次点击按钮时(当你想隐藏菜单时)，出于某种原因你决定用这行代码销毁/删除'ul'的'innerHtml':

sideMenuList.innerHTML = '';

稍后再次单击按钮时(菜单返回)，您只需将 ul 的 innerHtml 分配给先前定义的 code>sideMenuListContent(所有这些都带有 setTimeout)。

setTimeout(() => {
    sideMenuList.innerHTML = sideMenuListContent;
}, 400);

但是在这个过程中，你已经销毁了所有的事件监听器。这就是为什么您的 JS 代码不起作用的原因。这至少是多余的步骤(我希望在下面的评论中对此进行解释)，但不仅如此 - 它不是将子级附加到某个 DOM 元素的“最佳方式”(至少可以说)。如果您发现确实需要实际追加子项，则首先需要使用 document.createElement 创建该子项，然后再使用 appendChild。 您可以在 this 中阅读更多相关信息和 this回答所以。 我知道希望我的回答是完整的，并且您可以更好地理解您的代码和 DOM。