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;
}