html 导航栏不检测是否打开

Question

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

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

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

您可以在调整 window/screen 大小并打开菜单而不关闭菜单时看到此问题。

我正在尝试通过根据屏幕尺寸更改其设计来制作我的导航栏 'responsive'（大屏幕的导航位于侧面，小屏幕的导航位于顶部）；这是我的问题开始出现的时候。

我无法解决这个问题，因为我是 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 导航栏不检测是否打开

html navigation bar doesn't detect whether it's open or not

html

css

jquery

navigationbar

responsive-design