JavaScript实现点击出现子菜单效果
作者:weixin_55108422 发布时间:2024-04-19 10:45:56
标签:js,点击,菜单
本文实例为大家分享了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>
来源:https://blog.csdn.net/weixin_55108422/article/details/113698571
0
投稿
猜你喜欢
- 封装为dll会带来很多的好处,主要包括只是产权的保护,以及效率和安全性能的提升。这个例子中被封装的dll文件可以隐藏access数据库的实际
- 目录:分析和设计组件编码实现和算法用 Ant 构建组件测试 JavaScript 组件本期,我们要讨论的话题是 JavaScript 的测试
- python 获取蓝牙设备类型扫描蓝牙设备获取到的信息中,无法判断扫描到的蓝牙设备属于什么类型的设备。扫描蓝牙信息使用的是python 里面
- 朋友有一个Rebuild Index的Job执行一般停掉了,问我是否可以查看哪些Index已经被Rebuild过了。本来以为Sys.inde
- 一、与字典值有关的计算问题想对字典的值进行相关计算,例如找出字典里对应值最大(最小)的项。解决方案一:假设要从字典 {'a'
- 问题描述在电脑中重新安装Anaconda3&PyCharm后,运行原来的程序画图时出现了下图界面。不能弹出如下图所示的“figure”窗口。
- 本文中的示例主要是解决在函数间不能传递多个(32个以上)参数的问题,解题的具体思路就是采用记录类型作为函数的输入和返回值,所以我们需要先定义
- 前言大家好,今天有一个公务员的小伙伴委托我给他帮个忙,大概是有这样一份Word(由于涉及文件私密所以文中的具体内容已做修改)一共有近2600
- 一、创建数据库标准1.表的必备三个字段:id、gmt_create、gmt_modified2.gmt_create是创建时间,gmt_mo
- 前言本文对Python 自动化操作Excel并生成图表,做了详细的分析和说明我们先来看一下python中能操作Excel的常用库对比1.xl
- Python文件操作和异常处理Python作为一门高级编程语言,为我们提供了丰富的文件操作和异常处理机制。在本文中,我们将从以下几个方面讨论
- 简单Python词法分析器实现,供大家参考,具体内容如下词法分析器状态转换图:词法分析器总流程图:预处理程序:词法分析器:词法分析器程序详细
- 一、背景 最近系统线上数据库数据出现一个问题,发现某些字段存在一些异常的首尾空格,不管
- Oracle 数据库启动Oracle shutdown的时候突然断电,导致使用sql/plus启动时无法连接到数据库,具体描述为: conn
- 本文实例为大家分享了HTML5 Canvas实现的一个画板代码,供大家参考,具体内容如下<!DOCTYPE html><h
- 问题描述尝试用Python写一个Wordcloud的时候,出现了编码问题。照着网上某些博客的说法添添改改后,结果是变成了“UnicodeDe
- SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它
- 右击开始图标,打开“命令提示符(管理员)”。1、输入代码,停止服务。 net stop M
- 1. 关于 try.. finally..假如上帝用 python 为每一个来到世界的生物编写程序,那么除去中间过程的种种复杂实现,最不可避
- <!-- #include file="conn.asp" -->