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

前端之家收集整理的这篇文章主要介绍了jQuery纵向导航菜单效果实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果如下:

核心代码如下:

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程序设计有所帮助。

原文链接:https://www.f2er.com/jquery/43396.html

猜你在找的jQuery相关文章