鼠标悬浮显示二级菜单效果的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 相关文章推荐
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
js Dom实现换肤效果
Oct 21 Javascript
使用vue打包进行云服务器上传的问题
Mar 02 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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执行速度全攻略(上)
2006/10/09 PHP
PHP微框架Dispatch简介
2014/06/12 PHP
php生成xml时添加CDATA标签的方法
2014/10/17 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP常用技巧汇总
2016/03/04 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
Bootstrap实现的标签页内容切换显示效果示例
2017/05/25 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
2018/05/16 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
js数组的基本使用总结
2021/01/18 Javascript
python解析json串与正则匹配对比方法
2018/12/20 Python
django的聚合函数和aggregate、annotate方法使用详解
2019/07/23 Python
Python生成词云的实现代码
2020/01/14 Python
Pytorch中.new()的作用详解
2020/02/18 Python
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
三爱活动实施方案
2014/03/19 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
教师个人师德总结
2015/02/06 职场文书
2016年先进教师个人事迹材料
2016/02/26 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers