这是我的代码: 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 移动端导航完全展开后，浏览器窗口展开后自动向上滑动
最佳答案
由于您在单击该菜单栏图标时使用 Javascript 来切换显示，因此它在某种程度上几乎使 .mobile-menu 的“显示”css 无效(因为它在 css 已经加载)。因此，您需要切换 UL 显示值(子项)，而不是 .mobile-menu(父项)。这样，响应式 .mobile-menu css 就会保持原样……我相信这就是您提到的示例网站所做的。
<nav class="mobile-menu">
<ul class="mobile-menu-items">
<li><a href="#">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact Me</a></li>
</ul>
</nav>
将 .mobile-menu 的 css 保留为 display: none 在大屏幕上， display:block 用于小屏幕。然后对于新类“.mobile-menu-items”，您最初可以将其设置为显示:无，然后使用您的 jQuery 进行切换:
$('.nav-trigger').click(function(){
$('.mobile-menu-items').slideToggle();
});
或者，您可以切换可见性而不是显示。
$('.nav-trigger').click(function(){
if ( $('.mobile-menu').css('visibility') == 'hidden' )
$('.mobile-menu').css('visibility','visible');
else
$('.mobile-menu').css('visibility','hidden');
});
关于javascript - 即使在浏览器调整大小后响应菜单也不会关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28301561/