Question

我的任务是修复一个在悬停时做出反应的错误下拉菜单。当我从应该触发下拉列表的按钮移动鼠标时，它有时会关闭下拉列表。当我离开按钮时，我觉得它会触发离开事件，即使我没有离开包装器。

html是这样的：

<div id="shopcart_wrapper">
    <div class="hover_here">Shopcart</div>
    <div id="shopcartsummary" class="closed">
        Shopcartstuff here
    </div>
</div>

Javascript就是这样：

shopcartShowMouseEnter: function () {
    $('#shopcart_wrapper').on('mouseenter', function(){
        if(Modernizr.cssanimations){
            $('#shopcartsummary').addClass('open').removeClass('closed');
        }else{
            if(!$('#shopcartsummary').is(':animated')){
                eStore.shopcart.show();
            }
        }
    });
},
shopcartHideMouseLeave: function(){
    $('#shopcart_wrapper').on('mouseleave', function(){
        if(Modernizr.cssanimations){
            $('#shopcartsummary').removeClass('open').addClass('closed');
        }else{
            if(!$('#shopcartsummary').is(':animated')){
                eStore.shopcart.hide();
            }
        }
    });
}

我觉得修复应该是在我触发mouseleave中的任何事件之前检查我是否仍然在#shopcartsummary上空盘旋。但是我该如何以最好的方式做到这一点？

Answer 1

我认为我追求的解决方案是：

shopcartHideMouseLeave: function(){
    if(!$('#shopcartsummary').is(':hover')){
        $('#shopcart_wrapper').on('mouseleave', function(){
            if(Modernizr.cssanimations){
                $('#shopcartsummary').removeClass('open').addClass('closed');
            }else{
                if(!$('#shopcartsummary').is(':animated')){
                    eStore.shopcart.hide();
                }
            }
        });
    }
}

越野车jquery悬停菜单

1 个答案: