如何使 show/hide 成为 non-child <div> 当 mouseenter/leave 在 link 上

Question

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

我的问题是关于添加和删除 class 来显示和隐藏带有 JS 和 CSS3 动画的 sub-menu 容器，当使用 mouse-enter 时main-menu 容器中的 link：我使用 data-section 属性将子菜单与悬停的 link.

相匹配

答案似乎很简单明了，但我无法解决，因为二级菜单放在另一个'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/

如何使 show/hide 成为 non-child <div> 当 mouseenter/leave 在 link 上

How to make show/hide a non-child <div> when mouseenter/leave on a link

javascript

css

jquery

animation