鼠标悬浮显示二级菜单效果的jquery实现
1.布局：
<divclass="show"> <imgsrc="~/images/head_icon.png"/> <divclass="drop"style="display:none;z-index:80000"id="profileMenu"> <ul> <li> <aclass="pass"style="cursor:pointer" href='#'> <span>修改密码</span> </a> </li> <li> <aclass="quit"style="cursor:pointer" href='#' ><span>退出</span></a> </li> </ul> </div> </div>
2.js控制：
functiondropMenu(obj){
$(obj).each(function(){
vartheSpan=$(this);
vartheMenu=theSpan.find(".drop");
vartarHeight=theMenu.height();
theMenu.css({height:0,opacity:0});
vart1;
functionexpand(){
clearTimeout(t1);
//theSpan.find('a').addClass("selected");
theMenu.stop().show().animate({height:tarHeight,opacity:1},200);
}
functioncollapse(){
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);
});
}