Javascript 在调整窗口大小后重置切换的类

我正在尝试使我的手机菜单与此网站上的菜单一样：

在我提到的网站上，如果在宽度<1001px的窗口中打开移动菜单，然后调整到更大的宽度，即使再次调整到<1001px，菜单仍保持关闭。我正试图找出实现同样目标的最佳方法

现在，单击我的移动导航“burger”可切换四个单独的类：

//---HTML---//

<button class="burger navbar-toggler navbar-toggler-right" 
type="button" id="button">
  <span class="sr-only">Toggle Navigation</span>
  <div class="topping"></div><!-- Need 'topping' css -->
</button>

//---jQuery---//

//Toggles 'burger' animation
$('.burger').click(function(){
 $(this).toggleClass('active');
});

//Toggles white-bg to cover content when menu slides out
$("#button").click(function() {
 $('.cloak-hide').toggleClass('cloak-hide-active');
});

//Toggles menu transform 
$("#button").click(function() {
 $('.menu-transform').toggleClass('menu-transform-active');
});

//Fades in Text on Mobile Nav
$("#button").click(function() {
 $('.mobile-nav-transition').toggleClass('mobile-nav-transition-
active');
});

---

非常适合任何反馈、建议或建设性批评

当屏幕宽度超过768px时，可以使用jQuery

resize

事件删除所有活动类

$(window).resize(function() {
  var sWidth = $( window ).width();
  if(sWidth > 768) {
    $('.burger').removeClass('active');
    $('.cloak-hide').removeClass('cloak-hide-active');
    $('.menu-transform').removeClass('menu-transform-active');
    $('.mobile-nav-transition').removeClass('mobile-nav-transition-active');
  }
});

---

当屏幕宽度超过768px时，可以使用jQuery

resize

事件删除所有活动类

$(window).resize(function() {
  var sWidth = $( window ).width();
  if(sWidth > 768) {
    $('.burger').removeClass('active');
    $('.cloak-hide').removeClass('cloak-hide-active');
    $('.menu-transform').removeClass('menu-transform-active');
    $('.mobile-nav-transition').removeClass('mobile-nav-transition-active');
  }
});

---

如果将变换设置为其自己的类，则可以切换动画运行的能力。这将允许您“立即”停用菜单，而不会发生转换

因此，与其只是切换不透明度状态，不如先切换过渡状态，然后设置不透明度。如果过渡类在那里，它会设置动画，如果不是，它不会。我想说你的情况很接近

---

正如@Dan Philip提到的<代码>$（窗口）。resize（）是检测调整大小事件的方法。

如果将转换设置为自己的类，则可以切换动画运行的功能。这将允许您“立即”停用菜单，而不会发生转换

因此，与其只是切换不透明度状态，不如先切换过渡状态，然后设置不透明度。如果过渡类在那里，它会设置动画，如果不是，它不会。我想说你的情况很接近

---

正如@Dan Philip提到的<代码>$（窗口）。resize（）是检测调整大小事件的方法。

谢谢你的建议，我现在正在尝试。嘿，丹，这就是我一直在寻找的解决方案！谢谢你给我指明了正确的方向。@Androbaut很乐意帮忙！谢谢你的建议，我现在正在尝试。嘿，丹，这就是我一直在寻找的解决方案！谢谢你给我指明了正确的方向。@Androbaut很乐意帮忙！太棒了，谢谢你的建议！我在这里几乎笑了，因为事后看来这似乎很明显…：$实施你的建议&它就像一个符咒。再次感谢，太棒了，谢谢你的建议！我在这里几乎笑了，因为事后看来这似乎很明显…：$实施你的建议&它就像一个符咒。再次感谢

$(window).resize(function() {
  var sWidth = $( window ).width();
  if(sWidth > 768) {
    $('.burger').removeClass('active');
    $('.cloak-hide').removeClass('cloak-hide-active');
    $('.menu-transform').removeClass('menu-transform-active');
    $('.mobile-nav-transition').removeClass('mobile-nav-transition-active');
  }
});