Use pure JS to achieve the secondary menu effect

This article example shares the specific code of JS to achieve the secondary menu effect for your reference. The specific content is as follows

js clicks on the secondary menu, clicks on the secondary menu and changes the main menu to the secondary menu

Click to display the secondary menu

<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')">Home</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')">Talent</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')">Market</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()">China</div>
   <div class="list" onclick="Xuan(this)">Shandong</div>
   <div class="list" onclick="Xuan(this)">Jinan</div>
   <div class="list" onclick="Xuan(this)">Jining</div>
   <div class="list" onclick="Xuan(this)">Weihai</div>
   <div class="list" onclick="Xuan(this)">Zibo</div>
</div>

function Show()
        {
            var list = document.getElementsByClassName("list");
             
            //Display 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");
            //Display list for(var i=0;i<list.length;i++)
            {
                list[i].style.display = "none";
            }  
                 
        }

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Universal secondary menu code (css+javascript)
Simply implement js click to expand the secondary menu function
Vue.js Example code for showing and hiding the left secondary menu
Display secondary menu js effects when the mouse passes over
js realizes the effect of sliding the secondary menu to the right horizontally
JavaScript mouse over to display the secondary menu special effects
Analysis of different implementation methods of JS secondary menu [4 methods]
Vue.js realizes the secondary menu effect
JS implements ultra-simplified response to the mouse to display the secondary menu code
js realizes the effect of displaying the current content by clicking on the secondary menu

<<: VMware workstation 12 install Ubuntu 14.04 (64 bit)

>>: JDBC Exploration SQLException Analysis