切换到另一个显示器后 JavaScript 停止工作

Question

每次我更改一个 HTML 文件中的显示时，JS 都会停止工作（我尝试用onclickJS 函数替换 HTML 调用，但它仍然是相同的）UPD：抱歉解释不好。问题是，如果我通过单击nav面板上的链接（例如从#main到#contacts或#cart）从该网站的主显示屏移动，JS 脚本会停止响应汉堡图标单击（单击汉堡导航面板以获得 800px 的屏幕最大宽度，什么也不做）代码：const burger = document.querySelector('.burger i');const nav = document.querySelector('.nav');function toggleNav() {  burger.classList.toggle('fa-bars');  burger.classList.toggle('fa-times');  nav.classList.toggle('nav-active');}burger.addEventListener('click', function() {  toggleNav();});html,body {  margin: 0;  padding: 0;  font-family: Arial, sans-serif;}.header {  width: 100%;  height: 70px;  display: flex;  align-items: center;  justify-content: space-around;  background: #ffffff;  color: #343434;  border-bottom: 1px solid #343434;  border-top: 1px solid #343434;}.logo {  letter-spacing: 3px;}.nav {  display: flex;  justify-content: space-around;  width: 30%;}.navlink {  list-style: none;  margin: 0;}.navlink a {  color: #343434;  text-decoration: none;  font-size: 1.2em;}.burger {  font-size: 1.2em;  display: none;}@media screen and (max-width: 800px) {  .burger {    display: block;  }  .nav {    margin: 0;    background: #ffffff;    position: absolute;    right: -100%;    top: 70px;    width: 50%;    height: calc(100% - 70px);    flex-direction: column;    justify-content: space-around;    padding: 0;    transition: all 400ms;  }  .navlink {    text-align: center;  }  .nav-active {    right: 0;  }}

Answer 1

问题是您.burger的 HTML 中有多个事件，而您只为第一个事件定义了 Javascript 事件。您可以通过以下方式解决此问题：

const burgers = document.querySelectorAll('.burger i');

和

for (let burger of burgers) {
    //define your event
}

但这不是最好的方法。您可以做的最好的事情就是重构您的 HTML 并使用单个项目.burger class，但具有更可靠的事件。