用纯JS实现二级菜单效果

更新时间：2021年04月23日 11:01:17 作者：贪吃ღ大魔王

这篇文章主要为大家详细介绍了用纯JS实现二级菜单效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现二级菜单效果的具体代码，供大家参考，具体内容如下

js点击出现二级菜单，点击二级菜单主菜单换成二级菜单

点击出现二级菜单

<style>
*{
                margin:0px auto;
                padding:0px;
                }
            .yiji{
                width:200px;
                height:40px;
                background-color:red;
                color:#fff;
                text-align:center;
                line-height:40px;h
                vertical-align:middle;
                border:1px solid #FFF;
                }
            .erji1{
                width:200px;
                height:40px;
                background-color:#F63;
                color:#fff;
                text-align:center;
                line-height:40px;
                vertical-align:middle;
                border:1px solid #FFF;
                }
            #erji2{
                display:none;
                                }
                 
            #erji3{
                display:none;
                                }
                 
            #erji4{
                display:none;
                                }
             
        </style>
    </head>
     
    <body>
        <div class="yiji" onclick="Show('erji2')">首页</div>
        <div id="erji2">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji3')">人才</div>
        <div id="erji3">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
             
        </div>
         
        <div class="yiji" onclick="Show('erji4')">市场</div>
        <div id="erji4">
            <div class="erji1">1</div>
            <div class="erji1">1</div>
            <div class="erji1">1</div>
        </div>
    </body>
    <script type="text/javascript">
                function Show(a)
        {
            var a = document.getElementById(a);
            if(a.style.display == "block")
            {
                a.style.display = "none";  
            }
            else
            {
                a.style.display = "block";
            }
        }   

</script>

#caidan{
        width:200px;
        height:40px;
        border:1px solid #999;
        text-align:center;
        line-height:40px;
        vertical-align:middle;
        }
     .list{
       width:200px;
       height:40px;
       border:1px solid #999;
       border-top-width:0px;
       text-align:center;
       line-height:40px;
       vertical-align:middle;
       display:none;
     }
      #caidan,.list:hover{
     cursor:pointer;
                 
   }
  .list:hover{
                 
   background-color:#63F;
}

<div style="width:200px; height:400px;">
   <div id="caidan" onclick="Show()">中国</div>
   <div class="list" onclick="Xuan(this)">山东</div>
   <div class="list" onclick="Xuan(this)">济南</div>
   <div class="list" onclick="Xuan(this)">济宁</div>
   <div class="list" onclick="Xuan(this)">威海</div>
   <div class="list" onclick="Xuan(this)">淄博</div>
</div>

function Show()
        {
            var list = document.getElementsByClassName("list");
             
            //显示列表
            for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "block";   
            }  
        }
         
        function Xuan(a)
        {
            var c = document.getElementById("caidan");
            c.innerHTML = a.innerHTML;
             
            var list = document.getElementsByClassName("list");
            //显示列表
            for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "none";
            }  
                 
        }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Spring Boot+AngularJS+BootStrap实现进度条示例代码
一般上传文件时都需要进度条，本篇文章主要介绍了Spring Boot+AngularJS+BootStrap实现进度条示例代码，有兴趣的可以了解一下。
2017-03-03
原生JS实现各种运动之复合运动
这篇文章主要为大家详细介绍了原生JS实现各种运动之复合运动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
js href的用法
关于js window.location.href location.href parent.location.href top.location.href 的用法
2010-05-05
jquery实现左右滑动式轮播图
这篇文章主要为大家详细介绍了jquery实现左右滑动式轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
bootstrap栅格系统示例代码分享
这篇文章主要为大家详细介绍了bootstrap栅格系统示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
12个非常有用的JavaScript技巧
在这篇文章中，我将分享12个非常有用的JavaScript技巧。这些技巧可以帮助你减少并优化代码，需要的朋友参考下本文吧
2017-05-05
js 通用javascript函数库整理
js 通用javascript函数库整理，学习js的朋友可以参考下。
2011-08-08
如何在TypeScript使用模块化以及注意事项详解
在TypeScript中就像在EC5中一样,任何包含顶级import或export的文件都被认为是一个模块,下面这篇文章主要给大家介绍了关于如何在TypeScript使用模块化以及注意事项的相关资料,需要的朋友可以参考下
2022-10-10
axios学习教程全攻略
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，下面这篇文章主要给大家介绍了axios学习教程的相关资料，文中介绍的非常详细，对大家具有一定的参考价值，需要的朋友下面来一起看看吧。
2017-03-03
p5.js入门教程之小球动画示例代码
本篇文章主要介绍了p5.js入门教程之小球动画示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03