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 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
JS获取整个页面文档的实现代码
Dec 15 Javascript
最好用的省市二级联动 原生js实现你值得拥有
Sep 22 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Extjs grid添加一个图片状态或者按钮的方法
Apr 03 Javascript
jquery form 加载数据示例
Apr 21 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
在微信小程序里使用watch和computed的方法
Aug 02 Javascript
js canvas实现二维码和图片合成的海报
Nov 19 Javascript
javascript中call()、apply()的区别
Mar 21 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
JavaScript 类的封装操作示例详解
May 16 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生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
JavaScript日历实现代码
2010/09/12 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
分享一道关于闭包、bind和this的面试题
2017/02/20 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python输入错误密码用户锁定实现方法
2017/11/27 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
基于Python实现迪杰斯特拉和弗洛伊德算法
2020/05/27 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
Java程序开发中如何应用线程
2016/03/03 面试题
大学开学计划书
2014/04/30 职场文书
励志演讲稿200字
2014/08/21 职场文书
合作协议书范本
2014/10/25 职场文书
基层干部个人对照检查及整改措施
2014/10/28 职场文书
2015年安康杯竞赛活动总结
2015/03/26 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
同事离别感言
2015/08/04 职场文书
2016年社区“我们的节日·中秋节”活动总结
2016/04/05 职场文书