欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2020-11-21 14:22:42|栏目:jquery|点击:

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); 
}); 
} 

上一篇:Jquery倒数计时按钮setTimeout的实例代码

栏    目:jquery

下一篇:基于jQuery实现仿QQ空间送礼物功能代码

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

本文地址:http://www.codeinn.net/misctech/24703.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有