jQuery纵向导航菜单效果实现方法
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要介绍了jQuery纵向导航菜单效果实现方法,可实现类似淘宝首页纵向菜单的显示效果,涉及jQuery鼠标响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下
本文实例讲述了jQuery纵向导航菜单效果实现方法。分享给大家供大家参考,具体如下:
效果如下:
核心代码如下:
$( document ).ready( function(e){ var $catCont = $( ".cat-cont" ); //二级菜单div var $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(). - $( window ).scrollTop(); var catBottomGap = viewHeight - catOffsetTop; var catPositionTop = $( this ).position().; var catContHeight = $catCont.height(); if( catBottomGap >= catContHeight ) { $catCont.css( "", catPositionTop ); } if( catBottomGap < catContHeight && viewHeight >= catContHeight ) { $catCont.css( "", catPositionTop - ( catContHeight - catBottomGap ) - 20 ); } if( catBottomGap < catContHeight && viewHeight < catContHeight ) { $catCont.css( "", catPositionTop ); } if( catBottomGap <= 66 ) { $catCont.css( "", 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程序设计有所帮助。
上一篇:JS实现滑动门效果的方法详解
下一篇:简单理解js的冒泡排序
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程