jQuery做二级菜单动画

来源：互联网发布：周易取名知乎编辑：程序博客网时间：2024/04/30 11:50

鼠标悬浮动态展出二级菜单在网页中非常常见，这里介绍如何用jQuery制作这种效果。相关的知识有：
mouseover() mouseout mouseenter() mouseleave() hover() show() hide()

有JS基础的同学，遇到这个问题的时候，很容易就想到mouseover() mouseout 这两个事件。我最开始做这个题目用的也是这两个事件。jquery代码如下：

<script>        $(function(){            $(".nav > li").mouseover(function(event){                $(this).children().show();            });            $(".nav > li").mouseout(function(){                var a = $(this).index();                $(".mune").hide();             });        })    </script>

这样写，鼠标悬浮时，确实可以得到对应的结果。但是我们想要的是动态展出的结果。所以show()和hide() 括号里还要填上时间。例如0.5s,所以应该是show(500)和hide(500)，这个时候，问题就出现了，我们发现，当我们鼠标悬浮在二级菜单的时候，二级菜单重复展出多次，最后才消失。

我们想要的效果应该是，鼠标悬浮对应的菜单，对应二级菜单展出。此时鼠标悬浮在二级菜单，二级菜单不应该消失。只有鼠标离开菜单和二级菜单，二级菜单才消失。下面给出两种处理办法：

1.用`mouseenter()` `mouseleave()` ：

问题的原因很容易想到，因为在DOM里面二级菜单是一级菜单的子元素，所以鼠标悬浮在二级菜单同样可以触发一级菜单的事件（事件冒泡）。

我再翻看手册，发现了mouseenter() mouseleave() ，他们也是是鼠标悬浮和离开事件。区别是：用mouseenter() mouseleave() 时，子级的事件不会传递到父级。所以上面的问题就变的容易。只要将mouseover() mouseout 切换为mouseenter() mouseleave() 即可。
代码如下：

<script>        $(function(){            $(".nav > li").mouseenter(function(event){                $(this).children().show(500);            });            $(".nav > li").mouseleave(function(){                var a = $(this).index();                $(".mune").hide(500);             });        })    </script>

2.用`hover()`

其实hover()和上面的办法原理是一样的，我们查看它的语法是hover(enter,leave),所以hover()就是mouseenter() mouseleave() 综合。专门处理类似的问题，所以上面的代码可以更简洁些：

$(function(){            $(".nav > li").hover(function () {                $(this).children().show(500);            }, function () {                $(".mune").hide(500);            })        })

完整代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>二级菜单</title>    <style>        *{            margin: 0;            padding: 0;        }        li{            list-style-type: none;        }        ul.nav{            width: 400px;            height: 40px;            line-height: 40px;            margin: 50px auto;            background: #bbb;        }        ul.nav li{            float: left;            height: 40px;            padding: 0 15px;            position: relative;        }        ul.mune {            width: 100px;            position: absolute;            background: #ccc;            left: 0;            top: 40px;            display: none;        }    </style>    <script src="jquery-1.11.1.min.js"></script></head><body>    <ul class="nav">        <li>水果            <ul class="mune">                <li>苹果</li>                <li>雪梨</li>                <li>荔枝</li>            </ul>        </li>        <li>体育            <ul class="mune">                <li>跑步</li>                <li>篮球</li>                <li>足球</li>            </ul>        </li>        <li>游戏            <ul class="mune">                <li>王者荣耀</li>                <li>魔兽</li>                <li>超级玛丽</li>            </ul>        </li>    </ul>    <script>        $(function(){            // $(".nav > li").mouseenter(function(event){            //  $(this).children().show(500);            // });            // $(".nav > li").mouseleave(function(){            //  var a = $(this).index();            //  // $(".mune").mouseout(function(){            //  $(".mune").hide(500);            //  // })               // });            $(".nav > li").hover(function () {                $(this).children().show(500);            }, function () {                $(".mune").hide(500);            })        })    </script></body></html>

1 0

jQuery做二级菜单动画

1.用mouseenter() mouseleave() ：

2.用hover()

完整代码：

1.用`mouseenter()` `mouseleave()` ：

2.用`hover()`