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

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

2021-04-08 16:28jquerycn JavaScript

当鼠标悬浮时显示二级菜单，这种类似的效果，想必大家在浏览网页时经常会遇到吧，下面有个示例，大家可以看看

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

									}); 

									}