JavaScript to achieve drop-down menu effect

Use Javascript to implement a drop-down menu for your reference. The specific contents are as follows

I am still learning the big front end. Please forgive me if there are any irregularities or incorrect ideas in the code. Thank you for your advice.

Drop-down menus or side menus are very practical in actual development

Code:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 *{
 padding: 0;
 margin: 0;
 border: 0;
 }
 .menu{
 width: 100%;
 height: 50px;
 border: 1px solid lightyellow;
 box-shadow: 0 2px 5px black;
 }
 .menu div{
 /*margin-top: 10px;*/
 float: left;
 width: 19.82%;
 height: 50px;
 /* border: 1px solid red;*/
 text-align: center;
 }
 button{
 margin-top: 15px;
 cursor: pointer;
 width: 25px;
 height: 15px;
 background-color: pink;
 }
 .show1{
 display: none;
 width: 19.82%;
 height: 250px;
 /*border: 1px solid black;*/

 }
 .show1 div{
 border: 1px solid pink;
 width: 247px;
 height: 48px;
 text-align: center;
 }
 a{
 text-decoration: none;
 display: block;
 margin-top: 10px;
 }
 a:hover{
 color: #ff242d;
 font-size: 25px;
 }
 </style>
</head>
<body>
 <div class="menu">
 <div> drop down 1
 <button>^</button>
 </div>
 <div> drop-down 2
 <button>^</button>
 </div>
 <div> drop down 3
 <button>^</button>
 </div>
 <div> drop down 4
 <button>^</button>
 </div>
 <div> drop down 5
 <button>^</button>
 </div>
 </div>

 <div class="show1">
 <div><a href="#" >4654tyyut</a></div>
 <div><a href="#" >4654</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >sdf</a></div>
 <div><a href="#" >tert</a></div>
 </div>
 <script>
 var btn = document.querySelector('button')
 var show1 = document.querySelector('.show1')
 var flag=0
 btn.onclick = function () {
 if (flag === 0) {
 show1.style.display = 'block'
 flag=1
 }else {
 show1.style.display='none'
 flag=0
 }
 }
 </script>
</body>
</html>

Code Explanation

Here we mainly use the onclick of the script to implement it. The button I use here can also be replaced with other things, and the methods are similar.

After clicking the corresponding thing onclick, an event will be triggered, the function will be called, and then the value of the flag will be judged to perform corresponding operations, hiding/displaying the div.

The flag here is the key. This variable keeps changing between 0.1 when a click event occurs. The function is executed once when the click occurs, that is, the loop is executed once, that is, the value of the flag is judged, so as to achieve the effect of displaying/hiding.

Demonstration effect

When not pulled down

After pulling down

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:

JavaScript drop-down menu implementation code
css+js drop-down menu
JS implementation code for the three-level drop-down menu
js dynamically sets the default selected item in the select drop-down menu
A js implementation code for a date drop-down menu
JS real multi-level linkage drop-down menu class, easily realize the linkage menu of provinces, cities and districts!
Js click pop-up drop-down menu effect example
JavaScript to show and hide the drop-down menu
Three ways to implement the secondary drop-down menu in the navigation menu in JS
js to achieve the effect code of cascading drop-down menu of provinces and cities across the country

<<: Using Docker run options to override settings in the Dockerfile

>>: Mysql GTID Mha configuration method