鼠标悬浮显示二级菜单效果的jquery实现
鼠标悬浮显示二级菜单效果的jquery实现
发布时间:2016-12-30 来源:查字典编辑
摘要:1.布局:修改密码退出2.js控制:functiondropMenu(obj){$(obj).each(function(){vartheS...

1.布局:

<div> <img src="~/images/head_icon.png" /> <div id="profileMenu"> <ul> <li> <a href='#'> <span>修改密码</span> </a> </li> <li> <a 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); }); }

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类