老师，帮忙看下哪里可以优化的地方，或者有哪种更好的实现方法告知下，谢谢

来源：4-4 自由编程

慕丝1342

2020-05-17 22:22:39

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局header</title>
<link rel="stylesheet" href="css/grid.css">
<style>
*{margin: 0;padding: 0;box-sizing: border-box;}
li{list-style: none;}

.container{
display: flex;
width: 100%;
height: 60px;
line-height: 60px;
border: 1px solid #eee;
}

.row{
display: flex;
width: 100%;
overflow: hidden;
}

.nav ul{
display: flex;
}
.nav ul li{
margin-left: 20px;

}
.logo{
margin: 0 auto;
}
.logo img{
height: 100%;
}

.btn-warp{
background-color: red;
border: none;
border-radius: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
position: relative;

}
.btn{
margin-left: 80px;
background-color: transparent;
border: none;
outline: none;
}

.btn .line{
display: block;
height: 2px;
line-height: 2px;
width: 22px;
background-color: #fee;
margin-top: 8px;
border-radius: 5px;
}

.btn-ul-warp{
width: 100%;
position: absolute;
top: 60px;
overflow: hidden;
}

.btn-ul{
width: 100%;
background-color: #eee;
display: block;
transition: all .7s;
}
.btn-ul-extended{
margin-top: -93px;
}
.btn-ul li{
padding-left: 20px;
display: block;c
height: 30px;
line-height: 30px;
width: 100%;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<header class="header">
<div class="container">
<div class="row"> <!-- 一行 -->
<div class="nav d-md-block d-none"> <!-- 一列 -->
<ul>
<li>首页</li>
<li>关于</li>
<li>商业合作</li>
</ul>
</div>
<div class="btn-warp d-md-none" id="btn">
<button type="button" class="btn">
<span class="line"></span>
<span class="line"></span>
</button>
</div>
<div class="btn-ul-warp d-md-none" id="btn-ul">
<ul class="btn-ul btn-ul-extended" id="ul">
<li>首页</li>
<li>关于</li>
<li>商业合作</li>
</ul>
</div>
<div class="logo">
<img src="img/logo.png" alt="">
</div>
</div>
</div>
</header>

<script>
var btn=document.getElementById("btn");
var ul=document.getElementById("ul");
var ulExtended="btn-ul-extended";

btn.onclick=function(){
// 判断ul的所有类名中是否有ulExtended这个类名
if(ul.classList.contains(ulExtended)){
ul.classList.remove(ulExtended); //有的话删除
}else{
ul.classList.add(ulExtended); //没有就加上
}
}
</script>
</body>
</html>

写回答

1回答