最近一个电商网站项目页面中有类似京东、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
试试吧
javascript
var $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
参数
javascript
var $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/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。