Question

我是网页设计新手，现在面临以下问题：单击汉堡图标（单击菜单中的触发器然后再次单击以隐藏它）后，我的导航栏消失，并调整窗口大小（我不希望它隐藏）。这是页面：https://www.ramezamr.com/navbar

如何重新创建问题：

1 - 打开链接https://www.ramezamr.com/navbar

2 - 调整窗口大小以达到700 px以下的宽度（汉堡图标将显示在左侧，导航将隐藏）

3 - 单击图标以触发隐藏的导航菜单，然后再次单击以隐藏它。

4 - 再次调整宽度超过700像素的窗口，你会发现导航栏不可见（这里的问题是我希望它在我最大化窗口后显示导航栏）。 / strong>

此致

Answer 1

我查看你的代码并找到这个

document.getElementsById('nav').style.display ='block';

将其替换为

document.getElementById('nav').style.display ='block';

它应该有用。

Answer 2

这不是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。

Answer 3

控制台中出现错误，指出document.getElementsById不是函数。这里的问题是它应该是元素而不是元素。所以它应该是：

document.getElementById('nav').style.display = 'block';

原因是ID是唯一的，您在页面上不能有多个具有相同ID的HTML元素。因此getElements..无效。

我也发现了：

if (w = 700)

这里，在if语句中，实际上是将700分配给变量w，它总是会计算为true。它不是为了平等而进行测试。你可能想做类似的事情：

if (w >= 700)

单击汉堡图标并调整窗口大小后，Navbar消失（我不希望它隐藏）

3 个答案: