鼠标悬浮显示二级菜单效果的jquery实现

前端技术 2023/09/03 JavaScript

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

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。