使用移动设备大小的菜单按钮后，导航栏消失（在全尺寸窗口中）
Posted
技术标签:
【中文标题】使用移动设备大小的菜单按钮后，导航栏消失（在全尺寸窗口中）【英文标题】：nav bar dissapears(in full size window) after using the menu button in mobile size 【发布时间】：2019-06-22 02:06:54 【问题描述】：我一直在关注有关导航栏的教程，一切都很好，除非我将窗口变小并尝试菜单按钮并将窗口重新缩放到正常大小，一切都消失了。
我尝试在 javascript 中添加 if 语句，但这并没有解决问题。
https://codepen.io/diegopiscoya/pen/yZJWBy
<script type="text/javascript">
$(document).ready(function()
$(".menu").click(function()
$("nav").slideToggle(500);
)
)
</script>
我希望脚本仅在窗口大小为 <900 时才有效，但它始终有效，因此当菜单按钮隐藏导航栏时，它也会以全尺寸显示。
【问题讨论】：
欢迎来到 SO！那么，当您对教程代码的最终产品（不是您的代码）进行完全相同的调整大小时会发生什么？ 【参考方案1】：那么，让我们了解一下代码中发生了什么...
当$(".menu").click(...)被触发时，它会触发$("nav").slideToggle(500);，其最终动作的滑动切换方法将在nav元素上添加一个内联css属性，如果nav被隐藏，它将是display: block;，如果显示了nav，则为display: none。
然后，当您打开和关闭移动菜单并将窗口重新缩放超过 900 像素时，内联 display: none 仍然在 nav 上，因此它不会显示，因为内联 CSS 已生效。
解决方案是：
如果窗口宽于 900 像素，您可以使用@media 并设置!important 规则“强制”CSS 将display:block 应用于您的nav。
所以：
@media(min-width: 901px)
nav#navegacion
display: block !important;
这是一个 CSS 解决方案，当然有许多不同的方法可以通过 CSS 和 Javascript 来实现。但我相信这是一个简单的。
$(document).ready(function()
$(".menu").click(function()
$("nav").slideToggle(500);
)
)body
margin: 0px;
padding: 0px;
font-family: "Bree serif", serif;
#navegacion
width: 100%;
padding: 0 50px;
box-sizing: border-box;
.logo
margin: 0;
padding: 15px 20px;
float: left;
#nav-list
padding: 0;
margin: 0;
float: right;
#nav-list li
list-style: none;
display: inline-block;
padding: 20px 30px;
transition: .5s;
#nav-list li a
color: black;
text-decoration: none;
.nav_li:hover
background: rgba(0, 0, 0, 0.089);
.resp-menu
width: 100%;
background:#fff;
padding: 10px 30px;
box-sizing: border-box;
display: none;
.resp-menu a
margin: 0;
padding: 3px 0;
float: left;
.resp-menu h4
margin: 0;
padding: 5px 10px;
color: #fff;
float: right;
background: yellow;
text-transform: uppercase;
cursor: pointer;
@media(max-width: 900px)
#navegacion
display: none;
padding: 0;
.resp-menu
display: block;
.logo
display: none;
float: none;
#nav-list
float: none;
display: block;
#nav-list li
display: block;
color: black;
text-align: center;
padding: 15px 20px;
border-bottom: 1px solid rgba(12, 8, 8, 0.1);
.resp-menu a
display: block;
@media(min-width: 901px)
nav#navegacion
display: block !important;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,
user-scalable=no">
<meta http-equiv="X-UA-compatible" content="ie=edge">
<title>document</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
</head>
<body>
<nav id="navegacion">
<a href="#"class="logo"><img src="wilphar_logo2.png" ></a>
<ul id="nav-list">
<li class="nav_li"><a href="#">Inicio</a></li>
<li class="nav_li"><a href="#">Nosotros</a></li>
<li class="nav_li"><a href="#">Productos</a></li>
<li class="nav_li"><a href="#">Contacto</a></li>
</ul>
<div style="clear: both"></div>
</nav>
<div class="resp-menu">
<a href="#"class="logo"><img src="wilphar_logo2.png" ></a>
<h4 class="menu">menu</h4>
<div style="clear: both"></div>
</div>
</body>
</html>【讨论】：
以上是关于使用移动设备大小的菜单按钮后，导航栏消失（在全尺寸窗口中）的主要内容，如果未能解决你的问题，请参考以下文章