Question

我创建了一个下拉菜单，其中每个主链接都附加了mouseenter和mouseleave事件，首先检查是否存在与该链接关联的子导航列表，然后滑动菜单变为可见性。如果您输入链接1并保留下拉幻灯片然后滑出，这可以正常工作但是如果您输入链接1然后将鼠标悬停在链接2上slideUp()一致性已经消失，理想情况下我想确保活动菜单有在新的mouseenter代码再次运行之前关闭。任何人都可以建议我如何实现这一目标？

链接到小提琴： http://jsfiddle.net/f3ZpN/1/

JS

var mainNav = $('.main-nav'),
    topLevelLinks = mainNav.children('li'),
    subNav = $('.sub-nav-panel'),
    subNavPanel,
    isActive = false,
    inner,
    innerLink;

topLevelLinks.on({
    mouseenter: function () {
        var el = $(this);

        if (el.children('.sub-nav').length > 0) {
            inner = el.children('.sub-nav');

            subNav.stop(true, true).slideDown(function () {
                inner.fadeIn();
            });
        }
    },
    mouseleave: function () {
        //make sure this finishes before mouseenter is run again?
        inner.fadeOut(function() {
            subNav.slideUp();
        });
    }
});

Answer 1

如果没有可见的子菜单，您只想致电subNav.slideUp()。以下是使用现有代码的简单修复：http://jsfiddle.net/PkAw3/它仍然不完美，但可能对您有帮助。

if (topLevelLinks.children('.sub-nav').filter(":visible").length === 0) {
    subNav.slideUp();
}

基于评论更新

一个小小的脑筋急转弯......所以我们不想在mouseleave的动画完成之前调用mouseenter的动画，反之亦然。您可以使用promise()和done() jQuery functions执行此操作。默认情况下，promise()将等到所有元素的动画完成后再执行done()。查看jsfiddle http://jsfiddle.net/F75yV/1/

的更新

进入和离开主链接时如何保持下拉菜单子导航过渡一致？

1 个答案:

基于评论更新