JQuery学习3——菜单效果二-优快云博客

本文链接：https://blog.youkuaiyun.com/yjjm1990/article/details/8695301

这个例子是上一个例子的延续，我们先来看一下最终我们要达到的效果：

这次我们要实现的是下面的效果，当鼠标滑动到菜单项的时候，子菜单显示；当鼠标移开的时候，菜单收起。

在这里，我们还解决了在滑动门会有的问题，就是当鼠标快速滑动的时候，会不停地触发，这个问题。

页面的代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menu.aspx.cs" Inherits="menu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/menu.js" type="text/javascript"></script>
    <link href="css/menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul>
            <li class="main">
                <a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单11</a></li>
                    <li><a href="#">子菜单12</a></li>                    
                </ul>            
            </li>
            <li class="main">
                <a  href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单21</a></li>
                    <li><a href="#">子菜单22</a></li>
                </ul>
            </li>
            <li class="main">
                <a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单31</a></li>
                    <li><a href="#">子菜单32</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div style=" margin-top:50px;">
        <ul>
            <li class="hmain">
                <a href="#">菜单项1</a>
                <ul>
                    <li><a href="#">子菜单11</a></li>
                    <li><a href="#">子菜单12</a></li>                    
                </ul>            
            </li>
            <li class="hmain">
                <a  href="#">菜单项2</a>
                <ul>
                    <li><a href="#">子菜单21</a></li>
                    <li><a href="#">子菜单22</a></li>
                </ul>
            </li>
            <li class="hmain">
                <a href="#">菜单项3</a>
                <ul>
                    <li><a href="#">子菜单31</a></li>
                    <li><a href="#">子菜单32</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </form>
</body>
</html>

CSS(menu.css)

ul,li
{
    list-style-type:none;
    /*如果不加margin在搜狗浏览器中不能左对齐*/
    margin:0px;     
    padding:0px;
    }
.main,.hmain
{
    background-image: url("../images/title.gif");
    background-repeat:repeat-x;
    width:100px;
    }
.main a,.hmain a
{
    background-image:url("../images/collapsed.gif");
    background-repeat:no-repeat;
    background-position:3px center;
    text-decoration:none;
    color:White;
    /*下面是用来保证鼠标只要停留在li上就可以响应，也就相当于让li的响应区域扩充了*/
    display:block;
    padding-left:20px;
    padding-bottom:3px;
    }
li
{
    background-color:#EEEEEE;
    }
.main li a,.hmain li a
{
    color:Black;
    background-image:none;
    }
.main ul,.hmain ul
{
    display:none;
    }
/*横向菜单的样式*/ 
.hmain
{
    float:left;
    }

menu.js

/// <reference path="jquery-1.9.1.min.js" />
$(document).ready(function () {
    var main = $(".main>a");
    main.click(function () {
        var ulNode = $(this).next("ul");
        //        if (ulNode.css("display") == "none") {
        //            ulNode.css("display", "block");
        //        }
        //        else {
        //            ulNode.css("display", "none");            
        //        }

        //百叶窗的效果
        ulNode.slideToggle("normal");
    });

    //现在的这个变量用来解决鼠标快速滑动问题clearInterval(setTimeoutId); nodeLi.children("ul").slideUp();
    var setTimeoutId;
    $(".hmain").hover(function () {
        var nodeLi = $(this);
        setTimeoutId = window.setTimeout(function () { nodeLi.children("ul").slideDown(); }, 300)
    },
    //上面的函数是鼠标进入的操作，下面的操作是鼠标移出的操作。
        function () {
            //开始的时候，我在这里犯了一个错误，应该重新定义一下nodeLi
            var nodeLi = $(this);
            clearTimeout(setTimeoutId);
            if (nodeLi.children("ul").length != 0) {
                nodeLi.children("ul").slideUp();
            };
        });
});