切换到另一个显示器后 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，但具有更可靠的事件。