菜单左jquery

Question

我试图显示和隐藏与切换整个侧面菜单栏（#menu_links）浏览器隧道到小于750px。

有没有人知道为什么当浏览器大小小于750时单击“#menu_button”时，通过浏览器边缘不会隐藏侧边菜单栏（#menu_links）？

https://menusel-169ba.firebaseapp.com/

$(document).ready(function() { 

    $('#menu_links').css({ width: '50px' }); 
    $('.collapse-menu').addClass('hidden'); 

    $('ul#menu_links li').hover(function() { 
     $('span', this).addClass('show'); 
     $('span', this).removeClass('hidden'); 
    }, function() { 
     $('span', this).addClass('hidden'); 
     $('span', this).removeClass('show'); 
    }); 


    // Muesrta panel de CAMBIAR CONTRASEÑA 
    $('a.test').on("click", function (e) { 
     $(this).next('ul').toggle(); 
     e.stopPropagation(); 
     e.preventDefault(); 
    }); 


    var timesClicked = 0; 
    $("#menu_button").click(function() { 
     timesClicked++ 
     if (timesClicked % 2 == 0) { 
      $('#menu_links').animate({ width: '50px' }, 350); 
      $('.collapse-menu').removeClass('show'); 
      $('.collapse-menu').addClass('hidden'); 

      $('ul#menu_links li').hover(function() { 
       $('span', this).addClass('show'); 
       $('span', this).removeClass('hidden'); 
      }, function() { 
       $('span', this).addClass('hidden'); 
       $('span', this).removeClass('show'); 
      }); 
     } else { 
      $('#menu_links').animate({ width: '200px' }, 350); 
      $('.collapse-menu').addClass('show'); 
      $('.collapse-menu').removeClass('hidden'); 

      $('ul#menu_links li').hover(function() { 
      }, function() { 
       $('span', this).addClass('show'); 
       $('span', this).removeClass('hidden'); 
      }); 
     } 
     console.log(timesClicked % 2); 
    }); 


    var menu_buttonVar = document.querySelector("#menu_button"), 
     menu_linksVar = document.querySelector("#menu_links"); 


    // checkWidth() BREACK-POINTS 
    function checkWidth() { 
     var windowSize = $(window).width(); 

     if (windowSize <= 750) { 
      console.log("screen width is less than 480"); 
      menu_linksVar.style.left = "-50px"; 


      $('#menu_button').click(function() { 
       $('#menu_links').animate({ 
        left: '0px', 
       }, 0); 
      }); 
     } // END if 

     else { 
      console.log("screen width is greater than or equal to 960"); 
      menu_linksVar.style.left = "0px"; 
     } 
    }; 

    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
}); // END documentReady 

Answer 1

现在我的菜单已经准备好并能正常工作。 下一步是合成代码以使用相同的功能但使用较少的字符。

这里是链接：

https://menusel-169ba.firebaseapp.com/

谢谢。