鼠標(biāo)懸浮顯示二級(jí)菜單效果的jquery實(shí)現(xiàn)

字號(hào):


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