我不知道为什么，但我的代码不起作用我想制作一个响应式导航栏
代码
<!doctype html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title></title>
</head>
<body>
<nav class="navbar" id="navbar">
<i class="fa fa-bars" aria-hidden="true" onclick="navigation()"></i>
<a href="#" class="logo">The Big Blog </a>
<div id="navLis">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Get Started</a></li>
<li><a href="#">Popular Bloggers</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact U</a></li>
</ul>
</div>
</nav>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
CSS 代码
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
}
#navLis {
display: none;
}
nav ul{
margin-top: 20px;
color: white;
background: black;
}
nav{
height:100px;
background: white;
border-bottom: 2px solid black;
position: relative;
background: #8dc09b;
}
nav li {
display: inline-block;
padding: 6px;
}
nav li a {
color: white;
display: inline-block;
}
nav i {
display: none!important;
font-size: 2em!important;
position: absolute;
top: 10px;
right: 10px;
transform: translate(-10px);
}
.logo{
font-size: 25px;
margin: 20px;
padding: 10px!important;
}
@media (max-width:668px){
nav {
height: 60px;
}
nav li {
text-align: center;
display: block;
}
nav i {
display: block!important;
}
}
我的问题是我的 id 为 navLis 的 div 没有显示，我用 JavaScript 编写了当它显示时没有显示块 😡 很简单！当我点击汉堡包时购买，我的导航（）只是让它可见，但是当我再次点击隐藏我的列表时它不起作用
慕村225694
相关分类