鼠标滑动实现---下拉菜单（原生js与jQuery方法）

最新推荐文章于 2022-05-09 07:15:00 发布

逆风优雅

最新推荐文章于 2022-05-09 07:15:00 发布

阅读量552

点赞数

分类专栏：开发小技巧总结文章标签： jquery js

本文链接：https://blog.csdn.net/qq_44603011/article/details/118308422

版权

开发小技巧总结专栏收录该内容

148 篇文章 6 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<style>
    #nav {
        list-style: none;
        display: flex;
    }
    #nav ul {
        padding: 0;
		list-style: none;
    }
    a {
        text-decoration: none;
    }
    #nav li {
        height: 50px;
        width: 150px;
        background-color: blueviolet;
        position: relative;
        background-color: pink;
        text-align: center;
    }
    #nav li ul li {
        border-bottom: 1px solid red;
        text-align: center;
        line-height: 50px;
    }
    #nav li ul {
        position: absolute;
        left: 0;
    }
    #nav li a{
        line-height: 50px;
    }
    .ul1{
        display: none;
    }
</style>

<body>
    <ul id="nav">
        <li>
            <a href="#">首页</a>
            <ul class="ul1">
                <li>name </li>
                <li>sex</li>
                <li>hone</li>
            </ul>
        </li>
        <li>
            <a href="#">首页1</a>
            <ul class="ul1"> 
                <li>nameone</li>
                <li>sex</li>
                <li>honeone</li>
            </ul>
        </li>
        <li>
            <a href="#" class="a156">首页2</a>
            <ul class="ul1">
                <li>nametwo</li>
                <li>sex</li>
                <li>honetwo</li>
            </ul>
        </li>
    </ul>
</body>

</html>
<script>
	
	
							//原生js方法  实现鼠标滑动显示隐藏元素
    //获取元素
    let nav = document.querySelector('#nav')
    let lis = nav.children//获取nav下面的四个子元素
    console.log(lis);
    //注册事件
    for(let i = 0 ; i < lis.length ; i++){//先便利所有的li
        //然后注册鼠标移入和移除事件
        lis[i].onmouseenter = function(){
            lis[i].children[1].style.display = 'block'//表示鼠标进入后的li的下面的第二个子元素的属性
        }
        lis[i].onmouseleave = function(){
            lis[i].children[1].style.display = 'none'//表示鼠标移除后的li的下面的第二个子元素的属性
        }
    }
 
 
 
								//jQuery实现鼠标滑动显示隐藏元素
	$('#nav>li').on('mouseenter',function(){
		$(this).children('ul').css('display','block')
	})
	$('#nav>li').on('mouseleave',function(){
		$(this).children('ul').css('display','none')
	})

</script>