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
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我