单击汉堡图标并调整窗口大小后,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消失(我不希望它隐藏)的主要内容,如果未能解决你的问题,请参考以下文章

拖动后元素变得随机不可调整大小

拖动后元素变得随机不可调整大小

Bootstrap Navbar 汉堡包在单击时不会折叠

如何通过单击按钮调整 div 大小并变为全屏

出现键盘后调整活动大小

Angular Bootstrap 4 Navbar 不会切换和 navbar-dark 问题