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的图片懒加载js
Jun 30 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
Firefox中beforeunload事件的实现缺陷浅析
May 03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JS得到当前时间的方法示例
Mar 24 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
浅谈vue-lazyload实现的详细过程
Aug 22 Javascript
深入了解JavaScript 私有化
May 30 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 Javascript
vue+Element-ui实现分页效果
Nov 15 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和.net的区别
2014/09/28 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
vue插件实现v-model功能
2018/09/10 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
vue使用echarts实现水平柱形图实例
2020/09/09 Javascript
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python字符串的常用操作方法小结
2016/05/21 Python
Python部署web开发程序的几种方法
2017/05/05 Python
使用Pytorch搭建模型的步骤
2020/11/16 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
高中生毕业自我鉴定
2013/10/10 职场文书
高级护理专业大学生求职信
2013/10/24 职场文书
全国法院系统开展党的群众路线教育实践活动综述(全文)
2014/10/25 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
2015年班组建设工作总结
2015/05/13 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
浅谈Python numpy创建空数组的问题
2021/05/25 Python