鼠标悬浮显示二级菜单效果的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中实现标签切换效果的代码
Mar 01 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
JavaScript 函数replace深入了解
Mar 14 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
简介alert()与console.log()的不同
Aug 26 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
Vue.js中数据绑定的语法教程
Jun 02 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
JavaScript 实现继承的几种方式
Feb 19 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
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-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
jQuery简单实现日历的方法
2015/05/04 Javascript
利用n工具轻松管理Node.js的版本
2017/04/21 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
解决VUE双向绑定失效的问题
2019/10/29 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
token 机制和实现方式
2020/12/15 Javascript
[02:16]完美世界DOTA2联赛PWL S3 集锦第三期
2020/12/21 DOTA
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
python实现在windows下操作word的方法
2015/04/28 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
python django 实现验证码的功能实例代码
2017/05/18 Python
Python实现求两个csv文件交集的方法
2017/09/06 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
python跳出双层for循环的解决方法
2019/06/24 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python笔记之facade模式
2019/11/20 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
Lee牛仔裤澳大利亚官网:美国著名牛仔裤品牌
2017/09/02 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
what is the difference between ext2 and ext3
2015/08/25 面试题
售后专员岗位职责
2013/12/08 职场文书
平面设计专业大学生职业规划书
2014/03/12 职场文书
创业融资计划书
2014/04/25 职场文书
尊师重教演讲稿
2014/09/04 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
golang中的struct操作
2021/11/11 Golang