js实现简易的下拉菜单

最新推荐文章于 2022-07-01 23:22:28 发布

I like study.

最新推荐文章于 2022-07-01 23:22:28 发布

阅读量328

点赞数

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/rj2017211811/article/details/104635762

版权

JavaScript 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

html+css部分

	<style type="text/css">
	   .link1{
            display: flex;
            width: 50px;
            height: 30px;
            background-color: #666666;
            text-decoration: none;
            color: #ffffff;
            justify-content: center;
            align-items: center;

        }
        .phones{
            position: absolute;
            display: none;
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        .phone{
           
            justify-content: center;
            display: flex;
            align-items: center;
            margin: 0;
            padding: 0;
            width: 50px;
            height: 30px;
            background-color: #888888;
        }
        .phone>a{
            text-decoration: none;
            color: #f7f7f7;
        }
	</style>
    <body>
    <a href="#" class="link1">手机</a>
    <ul class="phones">
        <li class="phone">
            <a href="#1">华为</a>
        </li>
        <li class="phone">
            <a href="#2">小米</a>
            </li>
        <li class="phone">
            <a href="#3">苹果</a></li>
        <li class="phone"><a href="#4">三星</a></li>
        <li class="phone"><a href="#5">OPPO</a></li>
        <li class="phone"><a href="#6">VIVO</a></li>
        <li class="phone"><a href="#7">Realme</a></li>
        <li class="phone"><a href="#8">魅族</a></li>
        <li class="phone"><a href="#9">一加</a></li>
        <li class="phone"><a href="#10">黑鲨</a></li>
        <li class="phone"><a href="#11">努比亚</a></li>
        <li class="phone"><a href="#12">锤子</a></li>
    </ul>
    </body>

js部分

<script type="text/javascript>
        var link1=document.querySelector('.link1')
        var phones = document.querySelector('.phones')
        link1.onmouseover=function(){
            phones.style.display='block'
        }
        link1.onmouseout=function(){


            var num = 0
            phones.querySelectorAll('.phone').forEach(function(phone,index){
               
                phone.onmouseover=function(){
                    phones.style.display='block'
                    /*console.log(phone)*/
                    phone.style.backgroundColor='skyblue'
                  
                }
                phone.onmouseout=function(){
          
                 
                    phone.style.backgroundColor=''
 
                }
            })
            console.log('num:' + num)
            /*if(num ==0) {
                phones.style.display='none'
            }*/
            
            phones.style.display='none'
          
            
            phones.onmouseout=function(){
                phones.style.display='none'
            }
           
        }
</script>

I like study.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现简易的下拉菜单

html+css部分 <style type="text/css"> .link1{ display: flex; width: 50px; height: 30px; background-color: #666666; text-decoration: ...
复制链接

扫一扫