网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的范文:

 

标题 鼠标悬浮显示二级菜单效果的jquery实现
范文
    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);
    });
    }
随便看

 

在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板,是学习及工作的有利工具。

 

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间:2025/5/21 8:51:06