服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - javascript实现下拉菜单效果

javascript实现下拉菜单效果

2022-01-20 16:40爱前端的茂茂 js教程

这篇文章主要为大家详细介绍了javascript实现下拉菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

用Javascript实现下拉菜单,供大家参考,具体内容如下

正在学习大前端中,有代码和思路不规范不正确的地方往多多包涵,感谢指教

下拉菜单,或者侧拉菜单在实际开发当中非常的实用

代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!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>下拉1
 <button>^</button>
 </div>
 <div>下拉2
 <button>^</button>
 </div>
 <div>下拉3
 <button>^</button>
 </div>
 <div>下拉4
 <button>^</button>
 </div>
 <div>下拉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>

代码解释

这里主要就是用script的onclick来进行实现,这里我用到的按钮,也可以换成其他的东西,做法都是类似的。

onclick点击相应的东西过后,便会触发事件,调用函数,然后判断flag的值来进行相应的操作,隐藏/显示div。

这里的flag是关键,这个变量在点击事件发生时不断在0.1之间变化,点击一次即该函数被执行一次,即循环一次,也就是判断flag的值,从而达到显示/隐藏的效果

演示效果

未下拉时

javascript实现下拉菜单效果

下拉后

javascript实现下拉菜单效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/weixin_44029226/article/details/113357320

延伸 · 阅读

精彩推荐
  • js教程原生js中运算符及流程控制示例详解

    原生js中运算符及流程控制示例详解

    这篇文章主要给大家介绍了关于原生js中运算符及流程控制的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价...

    meichaoWen5112021-12-27
  • js教程js制作提示框插件

    js制作提示框插件

    这篇文章主要介绍了js制作提示框插件的方法,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下...

    lanshanxiao10202021-12-18
  • js教程JS removeAttribute()方法实现删除元素的某个属性

    JS removeAttribute()方法实现删除元素的某个属性

    这篇文章主要介绍了JS removeAttribute()方法实现删除元素的某个属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,...

    C语言中文网7762021-12-30
  • js教程使用Typescript开发微信小程序的步骤详解

    使用Typescript开发微信小程序的步骤详解

    这篇文章主要介绍了使用Typescript开发微信小程序的步骤详解,本文分步骤通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考...

    陈希章6742021-12-30
  • js教程在HTML中使用JavaScript的两种方法

    在HTML中使用JavaScript的两种方法

    这篇文章主要介绍了在HTML中使用JavaScript的两种方法,帮助大家更好的理解和制作网页,感兴趣的朋友可以了解下...

    itbsl9342021-12-18
  • js教程javascript实现点击产生随机图形

    javascript实现点击产生随机图形

    这篇文章主要为大家详细介绍了javascript实现点击产生随机图形,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    半成熟、9602022-01-07
  • js教程JS实现鼠标移动拖尾

    JS实现鼠标移动拖尾

    这篇文章主要为大家详细介绍了JS实现鼠标移动拖尾效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    day09852021-12-21
  • js教程11个Javascript小技巧帮你提升代码质量(小结)

    11个Javascript小技巧帮你提升代码质量(小结)

    这篇文章主要介绍了11个Javascript小技巧帮你提升代码质量(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需...

    alanyf6092021-12-21