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


Posted in Javascript onDecember 19, 2016

本文实例讲述了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().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程序设计有所帮助。

Javascript 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
js实现上传图片预览方法
Oct 25 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
解决jQuery ajax动态新增节点无法触发点击事件的问题
May 24 jQuery
老生常谈js数据类型
Aug 03 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
简单理解js的冒泡排序
Dec 19 #Javascript
JS瀑布流实现方法实例分析
Dec 19 #Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 #Javascript
JavaScript闭包和范围实例详解
Dec 19 #Javascript
JS前端笔试题分析
Dec 19 #Javascript
利用vue实现模态框组件
Dec 19 #Javascript
JS中如何实现复选框全选功能
Dec 19 #Javascript
You might like
PHP实现倒计时功能
2020/11/16 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python处理json字符串转化为字典的简单实现
2016/07/07 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
Python实现类的创建与使用方法示例
2017/07/25 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
python GUI计算器的实现
2020/10/09 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
企业项目策划书
2014/01/11 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
重阳节活动总结
2014/08/27 职场文书
语文课外活动总结
2014/08/27 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
酒桌上的开场白
2015/06/01 职场文书
《成长的天空》读后感3篇
2019/12/06 职场文书