教你用纯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">1div>
            <div class="erji1">1div>
            <div class="erji1">1div>
             
        div>
         
        <div class="yiji" onclick="Show('erji3')">人才div>
        <div id="erji3">
            <div class="erji1">1div>
            <div class="erji1">1div>
            <div class="erji1">1div>
             
        div>
         
        <div class="yiji" onclick="Show('erji4')">市场div>
        <div id="erji4">
            <div class="erji1">1div>
            <div class="erji1">1div>
            <div class="erji1">1div>
        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>             

教你用纯JS实现二级菜单_第1张图片

#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";
            }  
                 
        }

教你用纯JS实现二级菜单_第2张图片
教你用纯JS实现二级菜单_第3张图片
在这里插入图片描述

你可能感兴趣的:(案例,代码手写,实际开发应用,javascript,html5,css3)