鼠标悬浮显示二级菜单

来源：互联网发布：淘宝零点抢购在哪里编辑：程序博客网时间：2024/04/28 16:36

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

0 0