JavaScript实现点击出现子菜单效果


Posted in Javascript onFebruary 08, 2021

本文实例为大家分享了JavaScript实现点击出现子菜单的具体代码,供大家参考,具体内容如下

首先让我们看一下点击出现子菜单的效果如下图:

JavaScript实现点击出现子菜单效果

点击黄色的按钮,出现子菜单如下图:

JavaScript实现点击出现子菜单效果

让我们先看一下布局:

<div class="menu">
 <div class="sign" id="sign"></div>
 <div class="lis" id="lis">
 <ul>
 <li><a href="">one</a></li>
 <li><a href="">two</a></li>
 <li><a href="">three</a></li>
 <li><a href="">four</a></li>
 <li><a href="">five</a></li>
 </ul>
 </div>
</div>

CSS样式如下:

ul{
 padding-inline-start: 0px;
 }
 .menu{
 margin: 0 auto;
 background:#0DA795;
 height: 40px;
 width: 600px;
 }
 .sign{
 width: 30px;
 float: right;
 margin-right: 20px;
 margin-top: 8px;
 height: 25px;
 background: rgba(243,193,63,1.00);
 border-radius: 5px;
 position: relative;
 cursor: pointer;//把光标设置成手的形状
 }
 .lis{
 position: absolute;
 top:30px;
 display: none;
 }
 .lis ul li{
 list-style: none;
 width: 600px;
 line-height: 40px;
 font-size: 14px;
 text-align: center;
 border-bottom: 1px solid #565656;
 background:#EAEDD5;
 }.lis a{
 text-decoration: none;
 color: black;
 }
 .lis a:hover{
 color: #0da759;
}

CSS样式里面特别注意一下position(定位)。
Lis这个类里面的display:none;因为一开始子菜单是隐藏起来的。

JavaScript部分如下:

1、先获取它们的 ID,获取它们的ID之后,给第一个ID(sigin)通过OnClick添加一个点击事件;
2、在声明一个变量i,第二个ID赋值于i,在用一个分支语句if……else,如果i等于none;那么就执行第一条语句,如果不等于,就执行第二条语句。

这样就达到了我们想要的效果,见实现代码:

<script>
 var biaozhi=document.getElementById("sign");
 var li=document.getElementById("lis");
 biaozhi.onclick=function(){
 var i=li.style.display;
 if (i=="none"){
 li.style.display="block";//第一条语句
 }else{
 li.style.display="none";//第二条语句
 }
 }
</script>

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

Javascript 相关文章推荐
传智播客学习之JavaScript基础篇
Nov 13 Javascript
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
Javascript中正则表达式的全局匹配模式分析
Apr 26 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
详解Immutable及 React 中实践
Mar 01 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
Openlayers实现距离面积测量
Sep 28 Javascript
JavaScript数组reduce()方法的语法与实例解析
Jul 07 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
深入理解javascript中的this
Feb 08 #Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 #Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 #Vue.js
js基于canvas实现时钟组件
Feb 07 #Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
Feb 07 #Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 #Javascript
vue如何使用rem适配
Feb 06 #Vue.js
You might like
php中inlcude()性能对比详解
2012/09/16 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
laravel中Redis队列监听中断的分析
2020/09/14 PHP
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
2013/11/28 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
2020/02/23 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
[43:03]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
浅谈MySQL中的触发器
2015/05/05 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
Python if语句知识点用法总结
2018/06/10 Python
python中对数据进行各种排序的方法
2019/07/02 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
个人简历自我评价
2014/02/02 职场文书
财务会计自荐信范文
2014/02/21 职场文书
市场营销调查计划书
2014/05/02 职场文书
小学生倡议书范文
2014/05/13 职场文书
体育比赛口号
2014/06/09 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
名人传读书笔记
2015/06/26 职场文书
小学英语课教学反思
2016/02/15 职场文书