jQuery纵向导航菜单效果实现方法

本文实例讲述了jQuery纵向导航菜单效果实现方法。分享给大家供大家参考，具体如下：
效果如下：

核心代码如下：

$（ document ）.ready（ function（e）{var $catCont = $（ ".cat-cont" ）;//二级菜单divvar $catList = $（ ".J_Cat" ）;//一级菜单li$catList.on（ "mouseenter", function（）{var index = $（ this ）.index（）;var $curCatList = $（ ".cat-cont-bd>li:eq（" + index + "）" ）; //鼠标移上去对应的二级菜单的li$catList.removeClass（ "selected selected-prev" ）;$（ this ）.addClass（ "selected" ）.prev（）.addClass（ "selected-prev" ）;$catCont.show（）;$curCatList.css（ "display", "list-item"）.siblings（）.css（ "display", "none" ）;var viewHeight = $（ window ）.height（）;var catOffsetTop = $（ this ）.offset（）.top - $（ window ）.scrollTop（）;var catBottomGap = viewHeight - catOffsetTop;var catPositionTop = $（ this ）.position（）.top;var catContHeight = $catCont.height（）;if（ catBottomGap >= catContHeight ） {$catCont.css（ "top", catPositionTop ）;}if（ catBottomGap < catContHeight && viewHeight >= catContHeight ） {$catCont.css（ "top", catPositionTop - （ catContHeight - catBottomGap ） - 20 ）;}if（ catBottomGap < catContHeight && viewHeight < catContHeight ） {$catCont.css（ "top", catPositionTop ）;}if（ catBottomGap <= 66 ） {$catCont.css（ "top", catPositionTop - catContHeight + 33 ）;}}）.on（ "mouseleave", function（ event ）{if（ ！$（ event.relatedTarget ）.hasClass（ "cat-cont-bd" ） ）{//交互灾难:离开一级菜单划不到二级菜单，如何知道离开一级菜单后进入的是二级菜单？jquery提供属性：event.relatedTarget（离开后进入的对象）$（ this ）.removeClass（ "selected selected-prev" ）;$catCont.hide（）;}}）;$catCont.on（ "mouseleave", function（）{$catCont.hide（）;$catList.removeClass（ "selected selected-prev" ）;}）;}）;

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格（table）操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。