鼠标悬浮显示二级菜单效果的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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
Jun 25 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
javascript实现数字时钟效果
Feb 06 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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
PHP 缓存实现代码及详细注释
2010/05/16 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP共享内存用法实例分析
2016/02/12 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
json的前台操作和后台操作实现代码
2012/01/20 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python实现四人制扑克牌游戏
2020/04/22 Python
python MD5加密的示例
2020/10/19 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
Python监听剪切板实现方法代码实例
2020/11/11 Python
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
房地产销售经理岗位职责
2014/01/01 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
干部鉴定材料
2014/05/18 职场文书
行为规范主题班会
2015/08/13 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
优秀员工演讲稿
2019/06/21 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android