鼠标悬浮显示二级菜单效果的jquery实现
(编辑:jimmy 日期: 2025/5/11 浏览:3 次 )
1.布局:
<div class="show"> <img src="/UploadFiles/2021-04-02/head_icon.png">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); }); }
下一篇:BAT及各大互联网公司2014前端笔试面试题--JavaScript篇