首页 > 代码库 > 鼠标悬浮显示二级菜单

鼠标悬浮显示二级菜单

1.布局:

<div class="show">
            <img src=http://www.mamicode.com/"~/images/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);
        });
    }


鼠标悬浮显示二级菜单