鼠标悬浮显示二级菜单

最新推荐文章于 2024-05-13 23:35:43 发布

FreeBeer2015

最新推荐文章于 2024-05-13 23:35:43 发布

阅读量4k

点赞数

分类专栏： C#.NET

本文链接：https://blog.csdn.net/anpan1045535101/article/details/40586007

版权

C#.NET 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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