重置屏幕上的移动切换按钮条件更改

Question

我有一个移动汉堡菜单，该菜单可以通过CSS进行动画"打开"one_answers"关闭"。如果屏幕放大> 768px，则显示移动菜单display:none和全屏幕菜单。

html

<button id="nav-icon" class="toggle-nav">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</button>

jQuery

// Toggle x
$(document).ready(function(){
  $('#nav-icon').click(function(){
    $(this).toggleClass('open');
  });
});

但是，如果我打开了移动菜单，然后将屏幕大小更改为> 768px菜单 display:none(我要重置要隐藏(，但是"切换"按钮仍然"打开"，因此切换按钮的功能在反向(打开动画将其关闭，反之亦然(

如果屏幕缩放到＆lt; 768px(响应(

Answer 1

在您的$(document).ready功能中：

var mobileSize = 768;
var pastWidth = $(window).width();
$(window).resize(function(){
  var width = $(this).width();
  if((width < mobileSize && pastWidth > mobileSize) || (width > mobileSize && pastWidth < mobileSize)) {
    $('#nav-icon').removeClass('open');
  }
  pastWidth = width;
});