鼠标悬浮显示二级菜单效果的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); 
}); 
} 

您可能感兴趣的文章:

• js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
• 使用jQuery判断Div是否在可视区域的方法 判断div是否可见
• jQuery 拖动层(在可视区域范围内)
• JQuery获取元素尺寸、位置及页面滚动事件应用示例
• 基于jquery实现图片相关操作（重绘、获取尺寸、调整大小、缩放）
• jquery中获得元素尺寸和坐标的方法整理
• jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
• jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
• jQuery动画效果animate和scrollTop结合使用实例
• 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
• JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例