单击汉堡图标并调整窗口大小后，Navbar消失（我不希望它隐藏）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了单击汉堡图标并调整窗口大小后，Navbar消失（我不希望它隐藏）相关的知识，希望对你有一定的参考价值。
我是网页设计的新手，现在面临以下问题：单击汉堡图标后我的导航栏消失（单击菜单中的触发器，然后再次单击它以隐藏它），并调整窗口大小（我不希望它隐藏）。这是页面：https://www.ramezamr.com/navbar
如何重现问题：
1 - 打开链接https://www.ramezamr.com/navbar
2 - 调整窗口大小以达到700 px以下的宽度（汉堡图标将显示在左侧，导航将隐藏）
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>我查看你的代码并找到它
document.getElementsById('nav').style.display ='block';
用一个替换它
document.getElementById('nav').style.display ='block';
它应该工作。
控制台中有一个错误，说document.getElementsById不是一个函数。这里的问题是它应该是元素而不是元素。所以它应该是：
document.getElementById('nav').style.display = 'block';
原因是ID是唯一的，您在页面上不能有多个具有相同ID的html元素。因此getElements..无效。
我也发现：
if (w = 700)
在if语句中，实际上是将700分配给变量w，它总是会计算为true。它不是为了平等而进行测试。你可能想做类似的事情：
if (w >= 700)
以上是关于单击汉堡图标并调整窗口大小后，Navbar消失（我不希望它隐藏）的主要内容，如果未能解决你的问题，请参考以下文章