經過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/