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 相关文章推荐
javascript中注册和移除事件的4种方式
Mar 20 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
js获取html页面节点方法(递归方式)
Dec 13 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
Angular父子组件通过服务传参的示例方法
Oct 31 Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
Javascript中的匿名函数与封装介绍
2015/03/15 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
详解Vue.use自定义自己的全局组件
2017/06/14 Javascript
vue 粒子特效的示例代码
2017/09/19 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
深入浅出 Vue 系列 -- 数据劫持实现原理
2019/04/23 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
nodejs中的异步编程知识点详解
2021/01/17 NodeJs
[03:32]2014DOTA2西雅图邀请赛 CIS外卡赛赛前black专访
2014/07/09 DOTA
Python对两个有序列表进行合并和排序的例子
2014/06/13 Python
python求最大连续子数组的和
2018/07/07 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
如何使用python传入不确定个数参数
2020/02/18 Python
input file上传文件样式支持html5的浏览器解决方案
2012/11/14 HTML / CSS
写自荐信三大法宝
2014/01/24 职场文书
大型车展策划方案
2014/02/01 职场文书
就业意向书
2014/07/29 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL
利用Redis实现点赞功能的示例代码
2022/06/28 Redis