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); }); }
本文地址:https://www.stayed.cn/item/6217
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我