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