jQuery案例（1）（jQuery实现下拉菜单栏）（附：纯css，原生js实现）

最新推荐文章于 2024-10-02 10:11:21 发布

芝麻蓝

最新推荐文章于 2024-10-02 10:11:21 发布

阅读量907

点赞数 2

分类专栏：前端 jQuery 案例文章标签： jQuery 纯css 原生JavaScript 下拉菜单

本文链接：https://blog.csdn.net/weixin_44138076/article/details/98476072

版权

前端同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

jQuery

13 篇文章 0 订阅

订阅专栏

案例

2 篇文章 0 订阅

订阅专栏

jQuery实现下拉菜单

解析：给menu的子元素li（一级菜单）注册鼠标悬停事件，然后slideToggle()通过滑动缓慢切换显示与隐藏li的子元素ul（二级菜单）
注：要记得使用stop停止动画，不然操作频繁后就会出现下拉效果延迟
html：

<!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>下拉菜单</title>
    <link type="text/css" rel="stylesheet" href="downmenu.css"/>
    <script src="jquery-3.4.1.js"></script>
    <script src="downmenu.js"></script>
</head>
<body>
    <div class="allmenu">
        <ul class="menu">
            <li>
                <a href="javascript:void(0);">一级菜单0</a>
                <ul>
                    <li><a href="javascript:void(0);">一级菜单0.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单0.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单0.2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0);">一级菜单1.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单1.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单1.2</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:void(0);">一级菜单2</a>
                <ul>
                    <li><a href="javascript:void(0);">一级菜单2.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单2.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单2.2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

css：

*{
    padding:0;
    margin:0;
}
ul{
    list-style: none;
}
.allmenu{
    width:330px;
    height:30px;
    background-color: #5ec4ff;
    margin:100px auto 0;
    padding-left:10px;
}
a{
    display: block;
    height: 30px;
    width: 100px;
    text-decoration: none;
    color: #000;
    line-height: 30px;
    text-align: center;  
}
.menu ul{
    width:100px;
    height:30px;
    position:absolute;
    left:0;
    top:30px;
    display:none;
}
.menu li{
    width:100px;
    height:30px;
    background-color: #5ec4ff;
    float: left;
    margin-right: 10px;
    position:relative;
}

js：

$(function(){	
	$('.menu>li').hover(function(e) {
        $(this).children("ul").stop().slideToggle()
    });
})

纯css实现下拉菜单

在上一个的css基础上的
先默认二级菜单不现实，用hover使得鼠标经过时改变item的css的display属性改为block，使得二级菜单显示就行
html：

<!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>下拉菜单</title>
    <link type="text/css" rel="stylesheet" href="downmenu.css"/>
    <!-- <script src="jquery-3.4.1.js"></script>
    <script src="downmenu.js"></script> -->
</head>
<body>
    <div class="allmenu">
        <ul class="menu">
            <li class="one">
                <a href="javascript:void(0);">一级菜单0</a>
                <ul class="item">
                    <li><a href="javascript:void(0);">一级菜单0.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单0.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单0.2</a></li>
                </ul>
            </li>
            <li class="one">
                <a href="javascript:void(0);">一级菜单1</a>
                <ul class="item">
                    <li><a href="javascript:void(0);">一级菜单1.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单1.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单1.2</a></li>
                </ul>
            </li>
            <li class="one">
                <a href="javascript:void(0);">一级菜单2</a>
                <ul class="item">
                    <li><a href="javascript:void(0);">一级菜单2.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单2.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单2.2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

css：

*{
    padding:0;
    margin:0;
}
ul{
    list-style: none;
}
.allmenu{
    width:330px;
    height:30px;
    background-color: #5ec4ff;
    margin:100px auto 0;
    padding-left:10px;
}
a{
    display: block;
    height: 30px;
    width: 100px;
    text-decoration: none;
    color: #000;
    line-height: 30px;
    text-align: center;  
}
.menu ul{
    width:100px;
    height:30px;
    position:absolute;
    left:0;
    top:30px;
    display:none;
}
.menu li{
    width:100px;
    height:30px;
    background-color: #5ec4ff;
    float: left;
    margin-right: 10px;
    position:relative;
}
.one:hover .item{
    display: block;
}

原生js实现下拉菜单

原生的js实现下拉菜单应该是最麻烦的了，不过原理与jQuery的相似，先给所有的一级菜单li注册鼠标进入与鼠标离开事件，然后当鼠标进入时先获取一级菜单li下的子元素ul（遍历），获取到之后dom操作修改css样式修改为可见；鼠标离开时也是先获取一级菜单li下的子元素ul（遍历），获取到之后dom操作修改css样式修改为隐藏；

html：

<!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>下拉菜单</title>
    <link type="text/css" rel="stylesheet" href="downmenu.css"/>
    <script src="jquery-3.4.1.js"></script>
    <script src="downmenu.js"></script>
</head>
<body>
    <div class="allmenu">
        <ul class="menu">
         <--添加鼠标进入与离开事件-->
            <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)>
                <a href="javascript:void(0);">一级菜单0</a>
                <ul>
                    <li><a href="javascript:void(0);">一级菜单0.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单0.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单0.2</a></li>
                </ul>
            </li>
            <--添加鼠标进入与离开事件-->
            <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
                <a href="javascript:void(0);">一级菜单1</a>
                <ul>
                    <li><a href="javascript:void(0);">一级菜单1.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单1.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单1.2</a></li>
                </ul>
            </li>
            <--添加鼠标进入与离开事件-->
            <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">
                <a href="javascript:void(0);">一级菜单2</a>
                <ul>
                    <li><a href="javascript:void(0);">一级菜单2.0</a></li>
                    <li><a href="javascript:void(0);">一级菜单2.1</a></li>
                    <li><a href="javascript:void(0);">一级菜单2.2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

css：

*{
    padding:0;
    margin:0;
}
ul{
    list-style: none;
}
.allmenu{
    width:330px;
    height:30px;
    background-color: #5ec4ff;
    margin:100px auto 0;
    padding-left:10px;
}
a{
    display: block;
    height: 30px;
    width: 100px;
    text-decoration: none;
    color: #000;
    line-height: 30px;
    text-align: center;  
}
.menu ul{
    width:100px;
    height:30px;
    position:absolute;
    left:0;
    top:30px;
    display:none;
}
.menu li{
    width:100px;
    height:30px;
    background-color: #5ec4ff;
    float: left;
    margin-right: 10px;
    position:relative;
}

js：

function displaySubMenu(li) {     //注册鼠标进入事件
    var subMenu = li.getElementsByTagName("ul")[0];     //获取一级菜单的li的子元素ul
    subMenu.style.display = "block";     //将css的display属性设置为block可见
    } 
    function hideSubMenu(li) {   //注册鼠标离开事件
    var subMenu = li.getElementsByTagName("ul")[0];    //获取一级菜单的li的子元素ul
    subMenu.style.display = "none";      //将css的display属性设置为none  不可见
    }