通过点击显示/隐藏菜单
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
height: 40px;
width: 100%;
background-color: blanchedalmond;
list-style-type: none;
overflow: visible;
text-align: center;
}
.box1{
height: 100%;
width: 200px;
float: left;
position: relative;
}
.box2{
height: 100%;
width: 200px;
float: left;
position: relative;
}
.box3{
height: 100%;
width: 200px;
float: left;
position: relative;
}
.box5{
height: 100%;
width: 200px;
float: left;
position: relative;
}
.box4{
height: 100%;
width: 200px;
float: left;
position: relative;
}
#ul1{
list-style-type: none;
position: absolute;
top: 40px;
display: none;
}
#ul2{
list-style-type: none;
position: absolute;
top: 40px;
display: none;
}
#ul3{
list-style-type: none;
position: absolute;
top: 40px;
display: none;
}
#ul4{
list-style-type: none;
position: absolute;
top: 40px;
display: none;
}
#ul5{
list-style-type: none;
position: absolute;
top: 40px;
display: none;
}
li {
background-color: rgba(196, 240, 179, 0.726);
width: 200px;
height: 30px;
border: 1px solid rgb(172, 172, 172);
}
</style>
</head>
<body>
<div class="nav">
<div class="box1">首页
<ul id="ul1">
<li>番剧</li>
<li>直播</li>
<li>电影</li>
</ul>
</div>
<div class="box2">番剧
<ul id="ul2">
<li>鬼灭之刃</li>
<li>国王排名</li>
<li>高木同学</li>
<li>刀剑神域</li>
</ul>
</div>
<div class="box3">直播
<ul id="ul3">
<li>是乃诺尔</li>
<li>蛮憨憨</li>
<li>一只畅畅6</li>
<li>小佳</li>
</ul>
</div>
<div class="box4">游戏中心
<ul id="ul4">
<li>黑色沙漠</li>
<li>筑梦公馆</li>
<li>深空之眼</li>
<li>非匿名指令</li>
<li>碧蓝航线</li>
</ul>
</div>
<div class="box5">我的
<ul id="ul5">
<li>个人中心</li>
<li>关注</li>
<li>收藏</li>
<li>粉丝</li>
<li>动态</li>
</ul>
</div>
</div>
<script>
var box1 = document.querySelector('.box1');
var box2 = document.querySelector('.box2');
var box3 = document.querySelector('.box3');
var box4 = document.querySelector('.box4');
var box5 = document.querySelector('.box5');
var ul1 = document.getElementById('ul1');
var onOff = true;
box1.onclick = function(){
if(onOff)
{
ul1.style.display = 'block';
onOff = false;
}
else
{
ul1.style.display = 'none';
onOff = true;
}
}
box2.onclick = function(){
if(onOff)
{
ul2.style.display = 'block';
onOff = false;
}
else
{
ul2.style.display = 'none';
onOff = true;
}
}
box3.onclick = function(){
if(onOff)
{
ul3.style.display = 'block';
onOff = false;
}
else
{
ul3.style.display = 'none';
onOff = true;
}
}
box4.onclick = function(){
if(onOff)
{
ul4.style.display = 'block';
onOff = false;
}
else
{
ul4.style.display = 'none';
onOff = true;
}
}
box5.onclick = function(){
if(onOff)
{
ul5.style.display = 'block';
onOff = false;
}
else
{
ul5.style.display = 'none';
onOff = true;
}
}
</script>
</body>
</html>
有关应用
- if语句
- 布尔值
函数逻辑:如果onOff为true,显示菜单并将onOff变为false;如果onOff为false,隐藏菜单并将onOff变为true
实现效果
点击1次,显示菜单;点击2次,隐藏菜单