鼠标悬浮显示二级菜单

标签：style   blog   io   ar   java   sp   div   on   2014   

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>

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

鼠标悬浮显示二级菜单

标签：style   blog   io   ar   java   sp   div   on   2014   

原文地址：http://blog.csdn.net/anpan1045535101/article/details/40586007