我是网页设计的新手，现在面临以下问题: 单击汉堡图标(单击菜单中的触发器，然后再次单击以隐藏它)并调整窗口大小(我不想隐藏它)后，我的导航栏消失了。这是页面:https://www.ramezamr.com/navbar
如何重现问题:
1 - 打开链接 https://www.ramezamr.com/navbar
2 - 调整窗口大小以达到 700 像素以下的宽度(汉堡图标将显示在左侧，导航将隐藏)
3 - 单击该图标可触发隐藏的导航菜单，再次单击可将其隐藏。
4 - 再次调整窗口大小，宽度超过 700 像素，您会注意到导航栏不可见(这里的问题是我希望它在最大化窗口后显示导航栏)。
问候
最佳答案
这不是 javascript 的工作方式。您必须触发 onresize 事件才能执行相同的代码块并在每次更改时检查窗口宽度。如果用户更改宽度突然超过 700px，您的代码将无法正常工作，因此最好使用 >=。请看下面:
function navMenu() {
x = document.getElementById('nav');
if (x.style.display === 'block') {
x.style.display = 'none';
} else {
x.style.display = 'block';
}
}
function myFunction() {
var w = window.innerWidth;
if (w >= 700) {
document.getElementById('nav').style.display ='block';
}
}body {
margin: 0;
}
nav {
background-color:#ff4d4d;
width: 100%;
position:fixed;
-webkit-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
border: 0.2px solid white;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.drop li{
float: none;
}
.drop {
display: none;
}
li {
float: left;
}
li a {
text-decoration: none;
color: white;
background-color: #ff4d4d;
display: block;
width: 80px;
text-align: center;
padding: 10px 10px;
font-family: sans-serif;
letter-spacing: 1px;
border: 1px solid #ff0000;
}
a:hover {
background-color: #ff1a1a;
}
.droplist:hover .drop {
display: block;
position: absolute;
-webkit-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
box-shadow: 3px 11px 53px -12px rgba(0,0,0,0.75);
}
.material-icons {
cursor: pointer;
padding:8px;
text-align: center;
color: white;
}
.burger {
background-color: #ff4d4d;
display: block;
width: 100%;
position: fixed;
z-index: 1;
}
@media only screen and (max-width: 700px) {
body {
background-color: gray;
}
li {
float: none;
}
li a {
width: 100%;
}
.drop{
width: 100%;
display: block;
}
.droplist:hover .drop {
display: block;
position: relative;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
nav {
display: none;
}
}
@media only screen and (min-width: 700px) {
.burger {
display: none;
}
nav{
display: block;
}
} <body onresize="myFunction()">
<div class="burger" onclick="navMenu()">
<i class="material-icons">menu</i>
</div>
<nav id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="droplist"><a href="#">Dropdown</a>
<ul class="drop">
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>这里jsfiddle .
关于javascript - 单击汉堡图标并调整窗口大小后导航栏消失(我不想让它隐藏)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49050550/