• 售前

  • 售后

热门帖子
入门百科

用纯JS实现二级菜单结果

[复制链接]
dxf17 显示全部楼层 发表于 2021-10-26 14:06:06 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了JS实现二级菜单效果的具体代码,供各人参考,具体内容如下
js点击出现二级菜单,点击二级菜单主菜单换成二级菜单
点击出现二级菜单
  1. <style>
  2. *{
  3.                 margin:0px auto;
  4.                 padding:0px;
  5.                 }
  6.             .yiji{
  7.                 width:200px;
  8.                 height:40px;
  9.                 background-color:red;
  10.                 color:#fff;
  11.                 text-align:center;
  12.                 line-height:40px;h
  13.                 vertical-align:middle;
  14.                 border:1px solid #FFF;
  15.                 }
  16.             .erji1{
  17.                 width:200px;
  18.                 height:40px;
  19.                 background-color:#F63;
  20.                 color:#fff;
  21.                 text-align:center;
  22.                 line-height:40px;
  23.                 vertical-align:middle;
  24.                 border:1px solid #FFF;
  25.                 }
  26.             #erji2{
  27.                 display:none;
  28.                                 }
  29.                  
  30.             #erji3{
  31.                 display:none;
  32.                                 }
  33.                  
  34.             #erji4{
  35.                 display:none;
  36.                                 }
  37.             
  38.         </style>
  39.     </head>
  40.      
  41.     <body>
  42.         <div class="yiji" onclick="Show('erji2')">首页</div>
  43.         <div id="erji2">
  44.             <div class="erji1">1</div>
  45.             <div class="erji1">1</div>
  46.             <div class="erji1">1</div>
  47.             
  48.         </div>
  49.          
  50.         <div class="yiji" onclick="Show('erji3')">人才</div>
  51.         <div id="erji3">
  52.             <div class="erji1">1</div>
  53.             <div class="erji1">1</div>
  54.             <div class="erji1">1</div>
  55.             
  56.         </div>
  57.          
  58.         <div class="yiji" onclick="Show('erji4')">市场</div>
  59.         <div id="erji4">
  60.             <div class="erji1">1</div>
  61.             <div class="erji1">1</div>
  62.             <div class="erji1">1</div>
  63.         </div>
  64.     </body>
  65.     <script type="text/javascript">
  66.                 function Show(a)
  67.         {
  68.             var a = document.getElementById(a);
  69.             if(a.style.display == "block")
  70.             {
  71.                 a.style.display = "none";  
  72.             }
  73.             else
  74.             {
  75.                 a.style.display = "block";
  76.             }
  77.         }   
  78. </script>  
复制代码
  1. #caidan{
  2.         width:200px;
  3.         height:40px;
  4.         border:1px solid #999;
  5.         text-align:center;
  6.         line-height:40px;
  7.         vertical-align:middle;
  8.         }
  9.      .list{
  10.        width:200px;
  11.        height:40px;
  12.        border:1px solid #999;
  13.        border-top-width:0px;
  14.        text-align:center;
  15.        line-height:40px;
  16.        vertical-align:middle;
  17.        display:none;
  18.      }
  19.       #caidan,.list:hover{
  20.      cursor:pointer;
  21.                  
  22.    }
  23.   .list:hover{
  24.                  
  25.    background-color:#63F;
  26. }
复制代码
  1. <div style="width:200px; height:400px;">
  2.    <div id="caidan" onclick="Show()">中国</div>
  3.    <div class="list" onclick="Xuan(this)">山东</div>
  4.    <div class="list" onclick="Xuan(this)">济南</div>
  5.    <div class="list" onclick="Xuan(this)">济宁</div>
  6.    <div class="list" onclick="Xuan(this)">威海</div>
  7.    <div class="list" onclick="Xuan(this)">淄博</div>
  8. </div>
复制代码
  1. function Show()
  2.         {
  3.             var list = document.getElementsByClassName("list");
  4.             
  5.             //显示列表
  6.             for(var i=0;i<list.length;i++)
  7.             {
  8.                 list[i].style.display = "block";   
  9.             }  
  10.         }
  11.          
  12.         function Xuan(a)
  13.         {
  14.             var c = document.getElementById("caidan");
  15.             c.innerHTML = a.innerHTML;
  16.             
  17.             var list = document.getElementsByClassName("list");
  18.             //显示列表
  19.             for(var i=0;i<list.length;i++)
  20.             {
  21.                 list[i].style.display = "none";
  22.             }  
  23.                  
  24.         }
复制代码



以上就是本文的全部内容,希望对各人的学习有所资助,也希望各人多多支持草根技能分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作