jquery - html导航栏不检测是否打开

Question

我网站的导航栏明显有逻辑错误。我知道这是因为浏览器(我使用的是 chrome)没有检测到任何其他错误(例如语法错误)并且因为它部分工作。

我的导航栏的问题是它无法检测它是否打开。因此，即使菜单已经关闭，菜单按钮也可能显示关闭按钮(反之亦然)。

我的导航栏的工作方式是每次单击时更改其形状(菜单图标会在每次单击时更改，而不是在菜单打开时更改)。

您可以在调整窗口/屏幕大小时打开菜单而不关闭菜单时看到此问题。

我试图通过根据屏幕尺寸更改其设计来使我的导航栏“响应式”(大屏幕在侧面有导航，小屏幕在顶部有导航)；这是我的问题开始出现的时候。

我无法解决这个问题，因为我是 javascript 和 jQuery 的初学者，那么，是否有另一种更有效且效果更好的方法？

谢谢

编辑:除非您复制我的代码，保存并通过外部浏览器打开它，否则您看不到效果(如果您运行代码段，@media 将不起作用)

代码如下:

function menuTransform(x) {
	var y = document.getElementById("navbar");
	var z = $(window).width();
	x.classList.toggle("change");
	if (z > 500) {
		$('nav li:not(.menu)').show();
		$('nav hr').show();
		if (y.style.width === "300px") {
			y.style.transition = "ease 0.5s";
			$('nav li a span').addClass('link');
			$('nav li a span').removeClass('opened');
			y.style.width = "80px";
		}
		
		else {
			y.style.transition = "ease 0.5s";
			$('nav li a span').removeClass('link');
			$('nav li a span').addClass('opened');
			y.style.width = "300px";
		}
	}
	
	if (z <= 500) {
		$('nav li:not(.menu)').hide();
		$('nav hr').hide();
		if (y.style.height === "100%") {
			y.style.height = "80px";
			y.style.width = "100%";
			y.style.transition = "ease 0.5s";
			$('nav li a span').addClass('link');
			$('nav li:not(.menu)').hide();
			$('nav hr').hide();
		}
		
		else {
			y.style.height = "100%";
			y.style.width = "100%";
			y.style.transition = "ease 0.5s";
			$('nav li a span').removeClass('link');
			$('nav li:not(.menu)').show();
			$('nav hr').show();
		}
	}
}

#navbar {
  min-height: 100%;
  height: 100%;
}

nav {
	z-index: 10;
	position: fixed;
	top: 0px;
	background: linear-gradient(to right, rgb(0,0,0), rgb(13,13,13));
	width: 80px;
	list-style-type: none;
	color: white;
	box-shadow: 5px 0px 8px rgba(0,0,0,0.3);
	overflow: auto;
}

nav li {
	display: flex;
	justify-content: center;
	align-items: center;
}

nav li a {
	display: flex;
	width: 100%;
	height: 80px;
	color: white;
	text-decoration: none;
	justify-content: center;
	align-items: center;
	transition: 0.3s;
}

.link {
	display: none;
}

.opened {
	padding: 10px;
	padding-top: 11px;
	white-space: nowrap;
}

nav li a:hover:not(.active) {
	background: rgb(42,42,42);
	box-shadow: 0 1px 8px rgba(0,0,0,0.3);
	transform: translateY(-1px);
}

.menu {
	padding-top: 16px;
	padding-bottom: 16px;
}

.hamMenu {
	padding-top: -6px;
	cursor: pointer;
}

.bar1, .bar2, .bar3 {
	background: white;
	width: 36px;
	height: 5px;
	margin: 6px 0;
	transition: 0.5s;
}

.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-8px, 7px);
    transform: rotate(-45deg) translate(-8px, 7px);
}

.change .bar2 {
	background: rgba(0,0,0,0);
}

.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav id="navbar">
	<li class="menu">
		<div class="hamMenu" onclick="menuTransform(this)">
			<div class="bar1"></div>
			<div class="bar2"></div>
			<div class="bar3"></div>
		</div>
	</li>
    
	<li><a class="active" href="home.html"><i class="material-icons">home</i><span class="link">Home</span></a></li>
	<li><a href="Videos.html"><i class="material-icons">play_circle_filled</i><span class="link">Videos</span></a></li>
	<li><a href="#seminars"><i class="material-icons">tv</i><span class="link">Seminars</span></a></li>
	<li><a href="#seminars"><i class="material-icons">school</i><span class="link">Personal Tuition</span></a></li>
</nav>

Answer 1

您的火腿菜单没有宽度或高度。你把它设置成这样:

.hamMenu {
    padding-top: -6px;
    cursor: pointer;
}

因此，您试图在页面上点击它，但您没有点击它，因为它没有大小，即使它内部有具有大小的元素也是如此。

测试这个的一个好方法是给元素一个轮廓，它会告诉你它的大小:

.hamMenu {
    padding-top: -6px;
    cursor: pointer;
    outline: 1px solid;
}

我没有测试过，但最终应该是这样的:

.hamMenu {
    padding-top: -6px;
    cursor: pointer;
    width: 36px;
    height: 30px;
}