下拉菜单JQuery实现

最新推荐文章于 2024-01-08 16:50:01 发布

gxgalaxy

最新推荐文章于 2024-01-08 16:50:01 发布

阅读量133

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/gxgalaxy/article/details/102988412

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

jquery实现一个简单的下拉菜单

- 效果图
- 直接代码

在实现下拉菜单的时候，我们需要掌握的一个比较重要的点是区分mouseenter和mouseover以及mouseleave和mouseout。

		//mouseover  事件在鼠标移动到选取的元素以及其子元素上时触发
        //mouseenter  事件只在鼠标移动到选取的元素上时触发

		//mouseenter 和 mouseleave 一起使用
		//mouseover 和 mouseout 一起使用

        //以后如果有鼠标移入事件，使用mouseenter,而不是mouseover
        //如果有鼠标离开事件使用nouseleave,就不要使用mouseout

效果图

在这里插入图片描述

直接代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 315px;
            height: 40px;
            margin: 0 auto;
            background-color:skyblue;
        }
        ul{
            list-style: none;
        }
        .wrap li{
            background-color: pink;
        }
        .wrap > ul >li{
            float: left;
            margin-right: 5px;
            position: relative;;
        }
        .wrap a{
            display: block;
            height: 40px;
            width:100px;
            text-decoration: none;
            color:#000;
            line-height: 30px;
            text-align: center;
        }
        .wrap li ul{
            position: absolute;
            top:30px;
            display: none;
        }
    </style>
</head>
<body>
        <div class="wrap">
            <ul>
                <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单1</a></li>
                        <li><a href="javascript:void(0);">二级菜单2</a></li>
                        <li><a href="javascript:void(0);">二级菜单3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单1</a></li>
                        <li><a href="javascript:void(0);">二级菜单2</a></li>
                        <li><a href="javascript:void(0);">二级菜单3</a></li>
                    </ul>
                </li>
                <li>
                    <a href="javascript:void(0);">一级菜单1</a>
                    <ul>
                        <li><a href="javascript:void(0);">二级菜单1</a></li>
                        <li><a href="javascript:void(0);">二级菜单2</a></li>
                        <li><a href="javascript:void(0);">二级菜单3</a></li>
                    </ul>
                </li>
    
            </ul>
        </div>
    </body>
</html>
<script src="jquery-3.4.1.min.js"></script>
<script>
    $(function(){
         //给一级菜单设置鼠标移入事件，二级菜单显示
        $(' .wrap>ul>li').mouseenter(function(){
            // console.log(this);　//谁触发了鼠标移入事件，那么这个this就是谁，this还是一个dom对象
         //  $(this).children('ul').css('display','block'); //显示就是更改display属性为block
           $(this).children('ul').show();//show()方法本质上还是更新display属性为block;
          // $(this).children('ul').stop(true,false).slideDown(1000);//加上清除动画stop()函数后的效果
           
        }); 
        

        //给一级菜单设置鼠标离开事件，二级菜单隐藏
        $(' .wrap>ul>li').mouseleave(function(){
            // console.log(this);　//谁触发了鼠标移入事件，那么这个this就是谁，this还是一个dom对象
          // $(this).children('ul').css('display','none'); //显示就是更改display属性为none
           $(this).children('ul').hide();//hide()方法本质上还是更新display属性为none;
           // $(this).children('ul').stop(true,false).slideUp(200);//加上清除动画stop()函数后的效果
        }); 
        

    });
</script>