欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery编程卡开发中如何实现鼠标悬浮显示二级菜单效果

程序员文章站 2022-06-18 16:06:01
1.布局:

1.布局:

<p class="show"> 
<img src="~/images/head_icon.png" /> 

<p 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> 
</p> 
</p>

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