javascript - 如何在鼠标进入/离开链接时显示/隐藏非子

Question

我编写了一个带有子菜单的菜单，以在用户将鼠标悬停在主菜单链接上时显示。

我的问题是关于添加和删除一个类来显示和隐藏带有 JS 和 CSS3 动画的子菜单容器，当在主菜单容器中的链接上使用鼠标输入和输出时:我使用了data-section 属性使子菜单与悬停链接相匹配。

答案似乎很简单明了，但我做不出来，因为二级菜单放在另一个'strip'容器中，我不会修改结构 HTML 标记。

这是要测试的工作代码:

LINK of LIVE CODE to TEST

Answer 1

当您在两个菜单之间切换时，您需要先清除现有菜单。此外，您需要为它们清除计时器。在下面的代码中，使用了两个函数:第一个是清除超时，第二个是清除可见的子菜单。

var $submenu = $('.' + selector);
var visSub = $('.strip-header-submenu .submenu.is-visible').not($submenu);
    if (visSub.length > 0) {
        clearHideTimeout(visSub);
        hideSubmenu(visSub);
    }

工作 fiddle :http://jsfiddle.net/66xvLrL4/2/