通过jQuery menu-aim实现亚马逊快速切换导航的一点问题

最近一个电商网站项目页面中有类似京东、Amazon的导航模块
我当时第一时间就想到了不如试试亚马逊很久之前就实现的那种导航快速切换
不过我还是先通过简单的移入移出效果加上timeout来试了一下，一团糟...

百度到了这个插件可以实现这个功能，首先找到menu-aim项目地址（习惯了在github上找这些插件）https://github.com/kamens/jQuery-menu-aim 查看demo和用法，
好吧，demo虽然不能移出后隐藏，api里还是有的，那开始试试吧。于是开始在自己的项目中尝试。

第一次尝试：

https://jsfiddle.net/afegy4v6/6/embedded/result,html,css,js/

可以看到，有个bug，描述一下：
当第一次鼠标移入导航时，每一个子导航都可以展开，OK没问题。
然后鼠标移出后，再次移入导航时，在移入第一个和最后一个子导航时，就不展开了。
然后我看了一下插件demo，同样有这个bug。

重新看了一下api，添加两个option试试吧

javascriptvar $menu = $(".hovershow-menu");
// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
    activate: function(li){
        var menuId = $(li).attr("data-submenu-id");
        $("#"+menuId).show();
    },
    deactivate: function(){
        $(".hs-item").hide();
    },
    enterMenu:function(){ //鼠标移入整个菜单
        this.activate();
    },
    exitMenu: function() {//鼠标移出整个菜单
        this.deactivate();
    }
});
$(".hs-item").mouseover(function(){
    $(this).show();
});
$(".hs-item").mouseleave(function(){
    $(this).hide();
});

发现加上了enterMenu和exitMenu也没有解决问题。
然后在百度搜了很多网站给出的演示效果，同样存在这样的bug。

最终我通过关键词jquery munu-aim bug在google搜到了解决方法，就是加上一个exitMenu参数

javascriptvar $menu = $(".hovershow-menu");
// jQuery-menu-aim: <meaningful part of the example>
// Hook up events to be fired on menu row activation.
$menu.menuAim({
    activate: function(li){
        var menuId = $(li).attr("data-submenu-id");
        $("#"+menuId).show();
    },
    deactivate: function(){
        $(".hs-item").hide();
    },
    enter:function(){
        this.activate();
    },
    exitMenu: function() {
        return true;
    }
});
$(".hs-item").mouseover(function(){
    $(this).show();
});
$(".hs-item").mouseleave(function(){
    $(this).hide();
});

如此，完美解决。请看最终效果。

https://jsfiddle.net/afegy4v6/7/embedded/result,html,css,js/