【发布时间】：2015-02-04 00:29:16
【问题描述】：
这是我的代码： HTML：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Responsive Menu</title>
<link rel="stylesheet" href="css/colors.css"/>
<link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<header id="topbar">
<p>Some title</p>
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<div class="nav-trigger">
<span><i class="fa fa-bars fa-2x"></i></span>
</div>
<nav class="mobile-menu-enabler">
<span></span>
</nav>
</header>
<nav class="mobile-menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
<!-- Begin main sample site content -->
<div id="wrapper">
<p>Lorem ipsum dolor set amet...</p>
</div>
<script src="js/jquery-2.1.3.js"></script>
<script src="js/script.js"></script>
</body>
</html>
CSS：
body {
font-family: "Ludica Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}
p {
margin: 0;
padding: 0;
display: inline-block;
}
header {
margin: 0;
padding: 0;
display: inline-block;
position: absolute;
top: 0;
left: 0;
background-color: azure;
border: 1px solid black;
width: 100%;
}
/* Begin Menu Code */
.menu {
display: inline-block;
float: right;
}
.menu ul {
list-style: none;
margin: 5px 0;
}
.menu ul:last-child {
margin-right: 10px;
}
.menu ul li {
display: inline-block;
margin: 0 2px;
padding: 0;
border: 1px solid black;
}
.menu ul li a {
text-decoration: none;
color: black;
padding: 3px;
}
.menu ul li>:hover {
background-color:black;
color: white;
}
/* End Menu Code */
/* Mobile Menu Begin */
.mobile-menu-enabler {
display: none;
background-color: aqua;
}
.mobile-menu {
display: none;
position: relative;
top: 38px;
width: 100%;
border-top: 1px solid black;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-menu ul li {
margin: 0;
padding: 0;
border: 1px solid black;
border-top: 1px solid transparent;
text-align: center;
}
.mobile-menu ul li a {
margin: 0;
padding: 0;
text-decoration: none;
color: black;
}
.mobile-menu ul li:hover {
background-color: darkkhaki;
}
/* Mobile Menu End */
/* Mobile Trigger Button */
.nav-trigger {
display: none;
text-transform: uppercase;
color: black;
background-color: transparent;
margin-right: 10px;
padding: 0;
text-align: center;
}
.nav-trigger:hover {
color: red;
background-color: transparent;
}
/* End Mobile Trigger Button */
/* Dummy wrapper stuff */
#wrapper {
clear: both;
display: inline-block;
position: relative;
}
/* End Dummy wrapper stuff */
@media screen and (max-width: 900px) {
.menu {
display: none;
}
.mobile-menu-enabler {
display: block;
}
.nav-trigger {
display: inline-block;
float: right;
}
/*.mobile-menu {*/
/*display: block;*/
/*}*/
}
JavaScript：
$(document).ready(function(){ // Begin document ready function
var headerHeight = $("#topbar").height();
$(".nav-trigger").click(function() {
$(".mobile-menu").slideToggle(400)
});
$(".mobile-menu").css("top", headerHeight);
$("#wrapper").css("top", headerHeight);
}); // End document ready function
当页面加载时，我有一个包含虚拟链接的顶部标题栏。当浏览器宽度缩小到 900px 处的断点以下时，响应式菜单启动，此时单击“3 条图标”时，下拉菜单按预期显示。
但是，如果我在不先关闭下拉菜单的情况下将屏幕大小调整回全尺寸，那么即使在浏览器完全展开后它也会继续保持。
如何使下拉菜单在超过 900px 的断点处自动“取消切换”？
谢谢
编辑：截图：
这是我希望它的行为方式： callmenick.com/lab-demos/10-simple-responsive-navigation 移动导航完全展开后，浏览器窗口展开后会自动向上滑动
【问题讨论】：
-
似乎是一个极端的情况，但您必须使用 onresize 做一些事情。
-
请提供小提琴链接或现场示例，谢谢
-
@epascarello 不，这是错误的，因为会有一个巨大的性能问题。我以前在其他示例中看到过这样做。
标签： javascript jquery html css responsive-design