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 相关文章推荐
js或css实现滚动广告的几种方案
Jan 28 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
10分钟掌握XML、JSON及其解析
Dec 06 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
Jun 26 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
laravel-admin解决表单select联动时,编辑默认没选上的问题
2019/09/30 PHP
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
vue组件讲解(is属性的用法)模板标签替换操作
2020/09/04 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python正则实现计算器功能
2017/12/14 Python
5款非常棒的Python工具
2018/01/05 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
关于Python字符编码与二进制不得不说的一些事
2020/10/04 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
一套C++笔试题面试题
2012/06/06 面试题
为什么要使用servlet
2016/01/17 面试题
给老婆的婚前保证书
2014/02/01 职场文书
市场拓展计划书
2014/05/03 职场文书
企业文化理念标语
2014/06/10 职场文书
幼师中班个人总结
2015/02/12 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
同事打架检讨书
2015/05/06 职场文书
聘任通知书
2015/09/21 职场文书
关于做家务的心得体会
2016/01/23 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python