jquery 菜单效果

来源：互联网发布：网络实时音视频传输编辑：程序博客网时间：2024/06/05 13:36

1.实现功能：

竖标签，点击的时候放下，在次点击的时候收回。
横标签，鼠标滑过的时候放下，划出的时候收回。

2. 实现思路：

竖标签：给标题添加点击事件，收起所有的标签，检查选中的标题，如果是打开状态则收起，反之则放下
横标签一：监听标题，如果划过标题，放下菜单栏，划出标题，添加一个3秒的延时收回事件，如果这时候鼠标化进菜单栏，则将这个延时事件清除，划出菜单栏收回菜单栏。
横标签二：听标题的父节点，如果在父节点内，则放下菜单栏，如果不在，则收回菜单栏。

3. 代码：

menu.html

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>    <head>        <title>菜单效果</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <link type="text/css" rel="stylesheet" href="css/menu.css" />        <script type="text/javascript" src="js/jquery.js"></script>        <script type="text/javascript" src="js/menu.js"></script>    </head>    <body>            <ul>                <li  class="main">                    <a href="#">菜单项一</a>                    <ul>                        <li>1</li>                        <li>2</li>                        <li>3</li>                        <li>4</li>                        <li>5</li>                        <li>6</li>                    </ul>                </li>                <li  class="main">                    <a href="#">菜单项二</a>                    <ul>                        <li>1</li>                        <li>2</li>                        <li>3</li>                        <li>4</li>                    </ul>                </li>                <li class="main">                    <a href="#">菜单项三</a>                    <ul>                        <li>1</li>                        <li>2</li>                        <li>3</li>                        <li>4</li>                        <li>5</li>                    </ul>                </li>            </ul>            <ul>                <li  class="hmain">                    <a href="#">菜单项一</a>                    <ul>                        <li>1</li>                        <li>2</li>                        <li>3</li>                        <li>4</li>                        <li>5</li>                        <li>6</li>                    </ul>                </li>                <li  class="hmain">                    <a href="#">菜单项二</a>                    <ul>                        <li>1</li>                        <li>2</li>                        <li>3</li>                        <li>4</li>                    </ul>                </li>                <li class="hmain">                    <a href="#">菜单项三</a>                    <ul>                        <li>1</li>                        <li>2</li>                        <li>3</li>                        <li>4</li>                        <li>5</li>                    </ul>                </li>            </ul>    </body></html>

menu.css

ul,li{    /* 清除默认的样式*/    list-style: none;}ul{    padding-left:0px;}/*只有当背景图片没有的时候背景颜色才会发挥作用  background 从某种程度修正背景图片高度高于文字图片*/.main{    background-image:url(../images/title.gif);    background-repeat: repeat-x;    background-color: #eeeeee;    width: 100px;}/*display使之变成块级元素 点击的范围变大*/li a{    text-decoration: none;    padding-left: 20px;    display: block;}.main a,.hmain a{    background-image:url(../images/collapsed.gif);    background-repeat: no-repeat;    background-position: 3px,center;    color:white;}.main li,.hmain li{    color:black;}.main ul,.hmain ul{    display: none;}.hmain{    background-image:url(../images/title.gif);    background-repeat: repeat-x;    background-color: #eeeeee;    width: 100px;    float:left;}menu.js//>a只是指a//slideToggle() 可以实现dock 不需要自己写判断;$(function(){    $(".main>a").click(function(){/*          if($(this).next("ul").css("display")=="none"){              $(this).next("ul").css("display","block");          }else{              $(this).next("ul").css("display","none");          }          */        $(this).parent().siblings().children("ul").slideUp();        $(this).next("ul").slideToggle();        });    //第一种实现    $(".hmain>a").hover(function(){        $(this).next("ul").slideDown();    },function(){        var ulNode =  $(this).next("ul");        //用于在数秒后执行某个方法        var timeoutId = setTimeout(function(){            ulNode.slideUp();        },300)        ulNode.hover(function(){            clearTimeout(timeoutId);        },function(){            $(this).slideDown();        });    });//另一种实现/*    $(".hmain").hover(function(){        $(this).children("ul").slideDown();    },function(){        $(this).children("ul").slideUp();    });*/});

0 0