Menü-links mit jquery

Question

Ich versuche zu zeigen und ausblenden mit toggle die gesamte Seite Menüleiste (#menu_links), wenn der Browser auf weniger als 750px getunnelt ist.

Weiß jemand, warum die Seitenmenüleiste (#menu_links) nicht versteckt ist, indem Sie den Rand des Browsers übergeben, wenn Sie auf "#menu_button" klicken, wenn die Browsergröße kleiner als 750 ist?

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

Jetzt ist mein Menü fertig und es funktioniert einwandfrei. Der nächste Schritt besteht darin, den Code zu synthetisieren, um mit den gleichen Funktionen, aber mit weniger Zeichen zu arbeiten. Hier

ist der Link:

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

Danke.