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实现按Ctrl+Enter发送效果
Sep 18 Javascript
node.js超时timeout详解
Nov 26 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JavaScript闭包实例详解
Jun 03 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
JavaScript中字符串的常用操作方法及特殊字符
Mar 18 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 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
Array of country list in PHP with Zend Framework
2011/10/17 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
HTML中事件触发列表与解说
2007/07/09 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
Web打印解决方案之证件套打的实现思路
2016/08/29 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
解决element ui select下拉框不回显数据问题的解决
2019/02/20 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
vue之延时刷新实例
2019/11/14 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
对python3 urllib包与http包的使用详解
2018/05/10 Python
在django view中给form传入参数的例子
2019/07/19 Python
Pandas分组与排序的实现
2019/07/23 Python
css3的transition效果和transfor效果示例介绍
2013/10/30 HTML / CSS
html5是什么_动力节点Java学院整理
2017/07/07 HTML / CSS
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
关于圣诞节的广播稿
2014/01/26 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
股权转让协议书范本
2014/04/12 职场文书
实习推荐信
2014/05/10 职场文书
借款协议书
2014/09/16 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
县委班子四风对照检查材料思想汇报
2014/09/29 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
Python 数据可视化之Bokeh详解
2021/11/02 Python