Javascript 函数仅适用于一个类，而忽略具有相同类的其他页面

Question

我是一名新手程序员，所以如果这没有意义，我深表歉意。 我正在开发一个网站，我正在尝试实现一个汉堡菜单和一个关闭按钮来退出汉堡菜单。 javascript 函数在一个页面的 class 属性上运行良好，但在另一页面的同一 class 属性上运行良好。

这是我的代码

var close_popup = document.querySelector('.cancel-icon');

close_popup.addEventListener('click', function(){ 
document.getElementById('toggle').checked = false;
});

这是我的 HTML 代码

 <label class="Hamburger" for="toggle">&#9776;</label>
      <input type="checkbox" id="toggle"/>
       
      <!--  Navigation Bar  -->
      <nav class="navbar">
          <div class="cancel-icon" ><span>X</span></div>
        <a class="navlink1" href="Profile.html">Profile</a>
        <a class="navlink2" href="Portfolio.html">Portfolio</a>
        <a class="navlink3" href="Contact.html">Contact</a>
      </nav>
    </div>

这里是 CSS

    #toggle:checked + .navbar{
    top: -12vh;
    visibility: visible;
    min-height: 100vh;
    background-color: #3A3B3C;
    transform: scale(1.5);
    transition: all 0.5s ease-in-out;
}

此代码确保是否选中了汉堡菜单的复选框，然后将其设为 false。到目前为止，它适用于一页，但不适用于其他页面。我究竟做错了什么。谢谢

Answer 1

您的 javascript 工作正常。单击“.cancel-icon”会关闭打开的菜单。主要问题是“.cancel-icon”元素在菜单打开时被隐藏，导致您无法点击“X”图标。

这是一个更新的示例，我重新排列了 HTML 并添加了一些额外的 CSS 规则，以便在菜单打开时保持“X”图标可见。 CSS 的位置可以根据需要调整。

var close_popup = document.querySelector('.cancel-icon');

close_popup.addEventListener('click', function() {
  document.getElementById('toggle').checked = false;
});

#toggle:checked+.navbar {
  top: -12vh;
  visibility: visible;
  min-height: 100vh;
  background-color: #3A3B3C;
  transform: scale(1.5);
  transition: all 0.5s ease-in-out;
}

.cancel-icon {
  z-index: 10;
  position: absolute;
  right: 65px;
  top: 5px;
}

.cancel-icon:hover {
  cursor: pointer;
}

<label class="Hamburger" for="toggle">&#9776;</label>
<input type="checkbox" id="toggle" />


<!--  Navigation Bar  -->
<nav class="navbar">
  <a class="navlink1" href="Profile.html">Profile</a>
  <a class="navlink2" href="Portfolio.html">Portfolio</a>
  <a class="navlink3" href="Contact.html">Contact</a>
</nav>

<div class="cancel-icon"><span>X</span></div>