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 相关文章推荐
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
table insertRow、deleteRow定义和用法总结
May 14 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
angular实现商品筛选功能
Feb 01 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
Vuex的热更替如何实现
Jun 05 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php经典算法集锦
2015/11/14 PHP
求得div 下 img的src地址的js代码
2007/02/28 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
得到jQuery detach()后节点中的某个值实现代码
2013/02/05 Javascript
九种原生js动画效果
2015/11/11 Javascript
NodeJS实现阿里大鱼短信通知发送
2016/01/17 NodeJs
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
ajax异步请求详解
2017/01/06 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
Python实现单词拼写检查
2015/04/25 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
Python3 伪装浏览器的方法示例
2017/11/23 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
用python对oracle进行简单性能测试
2020/12/05 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
实现向右循环移位
2014/07/31 面试题
如何写毕业求职自荐信
2013/11/06 职场文书
建筑行业的大学生自我评价
2013/12/08 职场文书
高三学生评语大全
2014/04/25 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
2015年度绩效考核工作总结
2015/05/27 职场文书
转变工作作风心得体会
2016/01/23 职场文书
如何正确理解python装饰器
2021/06/15 Python