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

效果如下：

核心代码如下：

$(文档)。就绪(函数(e){ var $catCont=$(').cat-cont’)；//二级菜单div var $catList=$(' .j _ Cat’)；//一级菜单li $catList.on('mouseenter '，function(){ var index=$(this).index()；var $curCatList=$(' .cat-cont-bdli : eq('索引')；//鼠标移上去对应的二级菜单的李$ CatList。移除类(' selected selected-prev ')；$(这个)。addClass(')选定')。prev().addCLaSS(' selected-prev ')；$ CatCont。show()；$curCatList.css('display '，' list-item ').兄弟姐妹()。css('display '，' none ')；var viewHeight=$(窗口)。高度();var catofsettop=$(this).偏移量()。top - $(窗口)。滚动顶部()；var catbottongap=视图高度-catofsettop；var catPositionTop=$(this).位置()。顶部；var catcontahead=$ catcont。高度()；if(catbottongap=catcontahead){ $ catcont。CSS(' top '，catPositionTop)；} if(catbottongap catcontahead视图高度=catcontahead){ $ catcont。CSS(' top '，catPositionTop-(catcontahead-catbottongap)-20)；} if(catbottongap catcontahead视图高度catcontahead){ $ catcont。CSS(' top '，catPositionTop)；} if(catbottongap=66){ $ catcont。CSS(' top '，catPositionTop-catcontahead 33)；} }).on('mouseleave '，函数（事件){ if(！$(event.relatedTarget).有类(' cat-cont-BD '){//交互灾难：离开一级菜单划不到二级菜单，如何知道离开一级菜单后进入的是二级菜单？jquery提供属性：event.relatedTarget(离开后进入的对象)$(这个)。remove CLaSS(' selected selected-prev ')；$ CatCont。hide()；} });$catCont.on('mouseleave '，function(){ $ catcont。hide()；$ CatList。移除类(' selected selected-prev ')；});});更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery拖拽特效与技巧总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。