我正在尝试从网上学习教程，但我基本上按照它说的做了所有事情，但由于某种原因，当屏幕变小时菜单没有显示。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>New Header Design</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
body{
margin :0;
padding: 0;
font-family: sans-serif;
}
header{
background :#00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
nav ul {
background-color :#43a286;
overflow :hidden;
color: white;
padding : 0;
text-align: center;
margin:0;
-webkit-transition : max-height 0.4s;
-ms-transition : max-height 0.4s;
-moz-transition : max-height 0.4s;
-o-transition : max-height 0.4s;
-webkit-transition : max-height 0.4s;
}
nav ul li {
display: inline-block;
padding :20px;
}
nav ul li:hover{
background-color:#399077;
}
a{
text-decoration: none;
color:inherit;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
@media screen and (max-width: 580px){
nav ul{
max-height:0;
}
.showing {
max-height: 20em;
}
nav ul li{
box-sizing: border-box;
width:100%;
padding:15px;
text-align: left;
}
.handle{
display:block;
}
}
.handle{
width:100%;
background:#005c48;
text-align : left;
box-sizing: border-box;
padding: 15px 10px;
cursor:pointer;
color: white;
display: none;
}
</style>
</head>
<body>
<header>
<h1>Website Created</h1>
</header>
<nav>
<ul>
<a href="#"><li>HOME</a></li>
<a href="#"><li>ABOUT</a></li>
<a href="#"><li>BLOG</a></li>
<a href="#"><li>SHOP</a></li>
<a href="#"><li>CONTACT</a></li>
</ul>
<div class ="handle"> <h1>Menu</h1></div>
</nav>
<section>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
</section>
<script>
$('.handle').on('click', function(){
$('nav ul').toggleClass('showing');
});
</script>
</body>
</html>
所以我猜测 jquery 可能不正确，或者在将其缩小到移动 View 时类必须有一些错误。 需要一些帮助谢谢。
最佳答案
这是因为handle-class
.handle{
width:100%;
background:#005c48;
text-align : left;
box-sizing: border-box;
padding: 15px 10px;
cursor:pointer;
color: white;
display: none;
}
在媒体查询之后被调用。像这样在媒体查询之前移动句柄类，它将起作用。
.handle{
width:100%;
background:#005c48;
text-align : left;
box-sizing: border-box;
padding: 15px 10px;
cursor:pointer;
color: white;
display: none;
}
@media screen and (max-width: 580px){
nav ul{
max-height:0;
}
.showing {
max-height: 20em;
}
nav ul li{
box-sizing: border-box;
width:100%;
padding:15px;
text-align: left;
}
.handle{
display:block;
}
}
关于jquery - 具有响应式设计的固定标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29368476/