Javascript 导航栏动作奇怪

我在JsFiddle中设计的导航条看起来很奇怪。有时汉堡包菜单根本不起作用，其他时候它会打开和关闭菜单5次以上。非常感谢您的帮助

当我去掉窗口宽度函数时，它工作得很好，但我不希望它在768像素以上时表现相同，因为在大屏幕上不再需要汉堡包菜单

我相信这与此有关：

$(function(){
    var w = $(window).width();
$(window).resize(function() {
    if(w <= 768){
        $('.mobile-toggle').click(function(){
        $('nav').slideToggle(500);
        this.classList.toggle('change');
 });

  $('.m-link').click(function(){
      $('.m-link').removeClass('active');
      $(this).addClass('active');
      $('nav').slideToggle(500);
      $('.mobile-toggle').removeClass('change')
  });
 }else{
      $('nav').show();
 }
});
});

$（函数（）{
var w=$（window.width（）；
$（窗口）。调整大小（函数（）{
如果（w似乎与分辨率以及它如何变化有关。我的理解是，如果你改变分辨率，它是不固定的


.change.bar1{
-webkit变换：旋转（-45度）平移（-8px，6px）；
变换：旋转（-45度）平移（-8px，6px）；
背景色：红色；
}
.找零{
不透明度：0；
}
.找零{
-webkit变换：旋转（45度）平移（-7.5px，-7px）；
变换：旋转（45度）平移（-7.5px，-7px）；
背景色：红色；
}
这是一个JS问题。我部分修复了它，但现在遇到了一个问题，即在屏幕调整时，无论移动状态如何，我都会尝试使项目显示出来。