javascript实现下拉菜单效果


Posted in Javascript onFebruary 09, 2021

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

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

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

代码:

<!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实现下拉菜单效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS form布局
Oct 08 Javascript
js常用代码段整理
Nov 30 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
Mar 24 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
原生JavaScript制作微博发布面板效果
Mar 11 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
用javascript实现倒计时效果
Feb 09 #Javascript
javascript实现倒计时关闭广告
Feb 09 #Javascript
javascript实现固定侧边栏
Feb 09 #Javascript
JavaScript实现前端倒计时效果
Feb 09 #Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 #Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
You might like
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
php实现parent调用父类的构造方法与被覆写的方法
2015/02/11 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
xtree.js 代码
2007/03/13 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
类似CSDN图片切换效果脚本
2009/09/17 Javascript
js表格分页实现代码
2009/09/18 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
对vue里函数的调用顺序介绍
2018/03/17 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
利用Python实现图书超期提醒
2016/08/02 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python编程实现双击更新所有已安装python模块的方法
2017/06/05 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
网红编程语言Python将纳入高考你怎么看?
2018/06/07 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
Python字典底层实现原理详解
2019/12/18 Python
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
车间主管岗位职责
2013/11/14 职场文书
初中学生评语大全
2014/04/24 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
同意报考证明
2015/06/17 职场文书