鼠标悬浮显示二级菜单效果的jquery实现


Posted in Javascript onOctober 29, 2014

1.布局:

<div class="show"> 
<img src="~/images/head_icon.png" /> 

<div class="drop" style=" display:none; z-index:80000" id="profileMenu"> 
<ul> 
<li> 
<a class="pass" style="cursor: pointer" 
href='#'> 
<span>修改密码</span> 
</a> 
</li> 
<li> 
<a class="quit" style="cursor: pointer" 
href='#' 
><span>退出</span></a> 
</li> 
</ul> 
</div> 
</div>

2.js控制:

function dropMenu(obj) { 
$(obj).each(function () { 
var theSpan = $(this); 
var theMenu = theSpan.find(".drop"); 
var tarHeight = theMenu.height(); 
theMenu.css({ height: 0, opacity: 0 }); 


var t1; 


function expand() { 
clearTimeout(t1); 
//theSpan.find('a').addClass("selected"); 
theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200); 
} 


function collapse() { 
clearTimeout(t1); 
t1 = setTimeout(function () { 
// theSpan.find('a').removeClass("selected"); 
theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () { 
$(this).css({ display: "none" }); 
}); 
}, 250); 
} 


theSpan.hover(expand, collapse); 
theMenu.hover(expand, collapse); 
}); 
}
Javascript 相关文章推荐
JS高级笔记
Jul 13 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
javascript跑马灯抽奖实例讲解
Apr 17 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
javascript+css3开发打气球小游戏完整代码
Nov 28 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 #Javascript
JavaScript中的迭代器和生成器详解
Oct 29 #Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 #Javascript
javascript设置连续两次点击按钮时间间隔的方法
Oct 28 #Javascript
jQuery中parents()和parent()的区别分析
Oct 28 #Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 #Javascript
JS对象与json字符串格式转换实例
Oct 28 #Javascript
You might like
php学习之流程控制实现代码
2011/06/09 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
PHP实现原比例生成缩略图的方法
2016/02/03 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
javascript 数组排序函数
2009/08/20 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
JS在onclientclick里如何控制onclick的执行
2016/05/30 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
jQuery事件详解
2017/02/23 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
原生JS实现的自动轮播图功能详解
2018/12/28 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
python模拟登陆阿里妈妈生成商品推广链接
2014/04/03 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Mytheresa中国官网:德国时尚奢侈品商城
2017/08/04 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
中专三年学习的个人自我评价
2013/12/12 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
保证书范文大全
2014/04/28 职场文书
初中作文评语集锦
2014/12/25 职场文书
三八妇女节致辞
2015/07/31 职场文书
小学大队委竞选口号
2015/12/25 职场文书