希望这应该是一个简单的但不能完全理解它。我制作了一个小响应式菜单，当窗口大于800px宽时，它会在页面顶部显示为内联块。当低于此值时，导航将消失，并被一个切换按钮取代，当点击该按钮时，会弹出下方和左侧的导航。
这一切都运行正常，但代码中的一个小错误是，如果您将窗口调整到800px以下，再打开菜单然后再关闭，然后将窗口调整回800px以上，菜单不再显示jQuery已隐藏它的顶部。
是否可以更有效地重写我的媒体查询，以便每当窗口调整大小超过800px时它会显示菜单而不会失败？我最初写了一个小jQuery，不断检查$（window）.width（）是否超过800，但这似乎是一个非常笨拙的解决方案。
谢谢！ 弗雷泽
<!DOCTYPE html>
<html>
<head>
<title>Refined Responsive Menu</title>
<style>
/* General Styles */
body{
font-family: Helvetica, Sans;
font-size: 14px;
padding: 0;
margin: 0;
}
.container{
max-width: 1000px;
margin: 0 auto;
}
.content{
min-height: 2000px;
padding-top: 80px;
}
.content p{
padding-left: 30px;
padding-right: 30px;
}
/* Navigation Bar */
nav{
background: #222;
border-bottom: 1px solid #000;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
}
nav ul{
padding: 0;
margin: 0;
max-width: 1000px;
}
nav ul li{
display: inline-block;
}
nav ul li a{
color: #FFF;
text-decoration: none;
padding: 20px 30px;
display: inline-block;
}
nav ul li a:hover{
background: #444;
}
div.toggle-menu-btn{
display: none;
background: #222;
color: #FFF;
padding: 20px 30px;
position: fixed;
width: 100%;
}
div.toggle-menu-btn:hover{
background: #444;
cursor:pointer;
}
/* Media Queries */
@media screen and (max-width: 800px) {
div.toggle-menu-btn{
display: inline-block;
}
nav{
display: none;
margin-top: 60px;
width: 50%;
min-width: 200px;
}
nav ul li{
display: block;
}
nav ul li a{
display: block;
}
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.toggle-menu-btn').click(function(){
$('nav').toggle();
});
});
</script>
</head>
<body>
<div class="toggle-menu-btn">Toggle</div>
<nav>
<div class="container">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</nav>
<div class="container content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce purus quam, scelerisque id felis eget, sollicitudin vulputate est. Suspendisse ultrices tortor non feugiat rutrum. Vestibulum et quam nec est sollicitudin luctus. Nam dapibus est orci, et ultrices dolor dapibus suscipit. Nullam at ligula justo. Donec justo ligula, aliquet nec sapien nec, venenatis porttitor nibh. Proin a neque in metus accumsan auctor. Cras imperdiet risus ut mauris gravida, id ultrices velit condimentum. Proin non justo at lectus volutpat imperdiet.</p>
<p>Sed tempus sodales luctus. Suspendisse ullamcorper feugiat urna, eu convallis lacus rutrum eget. Aenean vitae facilisis elit, nec sagittis lectus. Aliquam erat volutpat. Mauris et molestie eros. Donec eget imperdiet nisi. Donec pretium justo in sollicitudin hendrerit. Duis ac turpis libero. Sed justo augue, sodales porttitor diam id, pretium venenatis lectus. Donec a sem ut libero ornare tincidunt ut vitae felis.</p>
<p>In ultrices sodales mattis. Morbi porta sapien tellus, tempor aliquet risus egestas adipiscing. Integer accumsan lobortis consectetur. Quisque hendrerit elit tortor, id cursus arcu interdum in. Cras consequat, odio eget suscipit auctor, tortor odio tristique velit, sed cursus erat mi vitae mi. Maecenas hendrerit ante ut elit elementum bibendum. Fusce cursus, mi sit amet semper hendrerit, justo nunc pharetra turpis, sed condimentum orci elit sed arcu. Maecenas eu tempor turpis. Aenean luctus eu enim in dictum. Duis adipiscing in tortor sed fermentum. Ut cursus sed erat eu elementum. Nulla eget nibh a sem tempus dictum. Sed tempus orci ac accumsan euismod. Sed consequat nibh quis ipsum dictum adipiscing. Integer non risus tortor. Donec molestie tincidunt justo sed rhoncus.</p>
<p>In elementum eget orci nec luctus. Duis id tellus tellus. Mauris sodales elit et mi cursus feugiat sit amet vitae felis. Sed et sem vitae turpis auctor vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus a sagittis metus. Pellentesque blandit libero tincidunt, fringilla felis non, porta dolor. Mauris dictum enim at laoreet eleifend. Vivamus dictum eleifend volutpat. Etiam ultricies ultricies elit ac pellentesque. Suspendisse mollis lorem viverra varius volutpat. Mauris pretium lacus quis facilisis dictum. Praesent vel nisl quis enim auctor dignissim.</p>
<p>Maecenas et mi nec magna mollis pretium. Fusce commodo elit odio, sit amet tincidunt dolor feugiat sed. Praesent risus nibh, sollicitudin vitae dictum mattis, varius ut tortor. Pellentesque dapibus metus nec nisi sollicitudin, eget dignissim massa elementum. Nulla consectetur, enim ut dapibus convallis, nisl lectus pulvinar nulla, eget dictum eros ligula sed libero. Proin ultrices rutrum est, dapibus iaculis ligula tempor non. Mauris vestibulum dolor elit, in egestas mi tempus ac. Curabitur sollicitudin turpis ut sapien dignissim vestibulum. Pellentesque vel dui eget purus elementum aliquet vitae non erat.</p>
</div>
</body>
</html>
答案 0 :(得分：0)
我想说，试试：
@media screen and (min-width: 800px) {
nav{
display: block !important;
}
}