jQuery做二级菜单动画

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

jQuery做二级菜单动画_第1张图片

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

完整代码:


<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>

你可能感兴趣的:(学习,总结)