Javascript 调整浏览器窗口大小时切换类触发两次 我现在正在创建一个响应导航。我设法完成并试图解决一个问题。每当我尝试调整浏览器的大小时，toggleClass似乎会触发多次。如果刷新浏览器，它可以正常工作，但在调整大小后，它似乎会在一次单击中触发几次

这是我一直在编写的代码

JSFiddle-

---

这是因为您多次添加单击事件。每次调用

detectMobile（）

时，都会将一个单击事件绑定到

$（'.navigation li'）

。那就走吧

$('.navigation li').on('click', function() {
     console.log('open');
     $(this).toggleClass('expand-menu');
})

---

在

detectMobile（）

函数之外。

这是因为您多次添加了click事件。每次调用

detectMobile（）

时，都会将一个单击事件绑定到

$（'.navigation li'）

。那就走吧

$('.navigation li').on('click', function() {
     console.log('open');
     $(this).toggleClass('expand-menu');
})

---

在您的

detectMobile（）

函数之外。

您可能希望将jQuery添加到您的小提琴中，以帮助其他人诊断您的问题。尝试将resize函数放置在

$（文档）之外。ready（）

您可能希望将jQuery添加到小提琴中，以帮助其他人诊断您的问题。尝试将resize函数放置在

$（文档）.ready（）

header {
  max-width: 1336px;
  margin: 0 auto; 
}

header .navigation {
  padding: 10px 0;
  clear: both; 
}

header .navigation li {
  padding: 10px;
  display: inline-block;
  position: relative;
  font-family: 'Arial', sans-serif;
  background-color: #272041;
  color: #fff;
  float: left; 
}

header .navigation li a {
  color: #fff; 
}

header .navigation li ul {
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 30px;
  display: none; 
}

header .navigation li ul li {
  background-color: #231d39;
  color: #95939e; 
}

header .navigation li:hover ul {
  display: block; 
}

header.mobile .navigation li {
  display: block;
  float: none; 
}

header.mobile .navigation li ul {
  position: static;
  display: none;
  height: 0; 
}

header.mobile .navigation li.expand-menu ul {
  height: initial;
  display: block; 
}

$('.navigation li').on('click', function() {
     console.log('open');
     $(this).toggleClass('expand-menu');
})