0

我创建了一个下拉菜单，其中每个主链接都有一个附加事件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();
        });
    }
});
4

1 回答 1

1

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

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

根据评论更新

有点脑筋急转弯......所以我们不想在 mouseleave 的动画完成之前调用 mouseenter 的动画，反之亦然。您可以使用promise()和done() jQuery 函数来做到这一点。默认情况下，promise()会等到所有元素的动画都完成后再执行done()。查看 jsfiddle http://jsfiddle.net/F75yV/1/上的更新

于 2013-04-17T20:42:59.157 回答