麻烦老师检查一下

来源：4-4 自由编程

大白前端

2020-10-26 17:50:59

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" type="text/css" href="./css/grid.css" />
<style type="text/css">
/* 基本样式 */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}

li {
list-style: none;
}

img {
width: 100%;
vertical-align: top;
border: none;
}

button {
outline: none;
border: none;
cursor: pointer;
}

a {
font-size: 14px;
color: #363636;
text-decoration: none;
}

a:hover {
color: #1428a0;
}

/* 布局 */
.header-container,
.header-nav-container,
.header-btn-container,
.header-logo-container {
height: 64px;
}

.header-btn-container {
display: flex;
align-items: center;
}

.header-nav {
height: 100%;
display: flex;
}

.nav-container {
overflow: hidden;
height: 0px;
border-bottom: 1px solid #dadada;
position: relative;
top: -1px;
line-height: 35px;
transition: height 0.5s;
}

.nav-container-extend {
top: 0;
height: 120px;
line-height: 35px;
}

/* 内容 */
.header-container {
background-color: #fff;
border: 1px solid #dadada;
}

.header-logo {
display: flex;
width: 136px;
height: 100%;
align-items: center;
}

.header-nav-item {
height: 100%;
margin-right: 24px;
}

.header-link {
display: flex;
height: 100%;
align-items: center;
font-weight: bold;
}

/* 组件 */
.btn-toggle {
padding: 10px;
border-radius: 3px;
background-color: transparent;
}

.btn-toggle:hover {
background-color: #f9f9f9;
}

.btn-toggle:hover .btn-toggle-bar {
background-color: #1428a0;
}

.btn-toggle-bar {
display: block;
width: 24px;
height: 4px;
background-color: #363636;
border-radius: 2px;
}

.btn-toggle-bar+.btn-toggle-bar {
margin-top: 4px;
}
</style>
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">

<div class="header-nav-container col-md-5 d-none d-md-block">
<ul class="header-nav">
<li class='header-nav-item'>
<a href="#" class="header-link">首页</a>
</li>
<li class='header-nav-item'>
<a href="#" class="header-link">关于</a>
</li>
<li class='header-nav-item'>
<a href="#" class="header-link">商业合作</a>
</li>
</ul>
</div>

<div class="header-btn-container col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>

<div class="header-logo-container col-7">
<a href="#" class="header-logo"><img src="./img/logo.png"></a>
</div>
</div>
</div>
</header>

<nav class="nav-container col-12 d-md-none" id="nav">
<ul class="container">
<li><a href="" class="nav-link">首页</a></li>
<li><a href="" class="nav-link">关于</a></li>
<li><a href="" class="nav-link">商业合作</a></li>
</ul>
</nav>
<script type="text/javascript">
function getEle(id) {
return document.getElementById(id);
};

var btnToggle = getEle('btn-toggle'); //切换按钮
var navContainer = getEle('nav'); //nav导航容器

btnToggle.addEventListener('click', function() {
if (navContainer.classList.contains('nav-container-extend')) {
navContainer.classList.remove('nav-container-extend');
} else {
navContainer.classList.add('nav-container-extend');
}
});
</script>
</body>
</html>