当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery编程卡开发中如何实现鼠标悬浮显示二级菜单效果

jquery编程卡开发中如何实现鼠标悬浮显示二级菜单效果

2019年03月27日  | 移动技术网IT编程  | 我要评论

1.布局：

<p class="show"> 
<img src="~/images/head_icon.png" /> 

<p 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> 
</p> 
</p>

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); 
}); 
}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网