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

html导航栏无法检测其是否打开

1 个答案: