主页 / 网络编程 /

用纯JS实现二级菜单效果

网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了用纯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--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";
            }  
                 
        }

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

上一篇：react实现浏览器自动刷新的示例代码 下一篇：微信小程序使用视频播放器video组件

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by