希望这应该是一个简单的，但就是不太明白。我正在制作一个小的响应式菜单，当窗口大于 800 像素宽时，它会在页面顶部显示为内联 block 。当低于此值时，导航消失并被一个切换按钮取代，单击该按钮会弹出下方和左侧的导航。
一切正常，但是代码中的一个小错误是，如果您将窗口大小调整到 800 像素以下，打开菜单然后再次关闭，然后将窗口大小调整回 800 像素以上，菜单将不再显示顶部，因为 jQuery 已将其隐藏。
是否可以更有效地重写我的媒体查询，以便任何时候将窗口大小调整到 800 像素以上时，它都能正常显示菜单？我最初写了一个小 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>
最佳答案
我会说，试试:
@media screen and (min-width: 800px) {
nav{
display: block !important;
}
}
关于jquery - 使用 jQuery 隐藏菜单，然后使用 CSS3 媒体查询重新出现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23736396/