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脚本代码跑起来。
Jan 09 Javascript
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
js中this对象用法分析
Jan 05 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
深入理解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 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP根据两点间的经纬度计算距离
2014/10/31 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
validator验证控件使用代码
2010/11/23 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
2017/01/21 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
详解javascript常用工具类的封装
2018/01/30 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
深入理解Python3 内置函数大全
2017/11/23 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
安全检查验收制度
2014/01/12 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
银行会计主管岗位职责
2014/10/01 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
python 详解turtle画爱心代码
2022/02/15 Python