Redimensionner le navigateur JQuery initier la fonction

Question

J'ai la fonction ci-dessous qui fonctionne comme prévu sur document prêt, mais sur le redimensionnement, il ne pas enregistrer le changement de taille et exécute l'alerte pour la taille avant le redimensionnement. J'ai ajouté le menuInitialized comme indicateur pour essayer de combattre le problème mais maintenant il s'initialise plusieurs fois. Par exemple, il alertera "Small", "Large", "small" Si je redimensionne le navigateur plusieurs fois.

var menuInitialized = false; 

function doMenu() { 
    var left = $('.c_left').height(); 
    var right = $('.c_right').height(); 
    if (left > right) { 
     $('.c_right').css('height', left + 'px'); 
    } 
    $(".c_left, .top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts, .myaccount, .header_logo").removeAttr('style'); 
    var $menu = $(".c_left"); 
    var width = $(window).width(); 
    var status = 'closed'; 
    var width = $(window).width(); 
    if (width < 550) { 
     if (!menuInitialized) { 
      $('.icon-menu-2').on('click', function(event) { 
       alert('small'); 
       if (status === 'closed') { 
        $menu.animate({ 
         width: 185, 
         marginLeft: 0, 
         display: 'toggle' 
        }, 'fast'); 
        $(".top_right, .c_right, .c_myaccount, .c_footer, .copyright, .accepts").animate({ 
         marginLeft: 185, 
         display: 'toggle' 
        }, 'fast'); 
        $(".myaccount").animate({ 
         marginRight: -185, 
         display: 'toggle' 
        }, 'fast'); 
        return status = 'open'; 
       } else if (status === 'open') { 
        $menu.animate({ 
         width: 0, 
         marginLeft: -185, 
         display: 'toggle' 
        }, 'fast'); 
        $(".top_right, .c_right, .c_myaccount,.c_footer, .copyright, .accepts").animate({ 
         marginLeft: 0, 
         display: 'toggle' 
        }, 'fast'); 
        $(".myaccount").animate({ 
         marginRight: 0, 
         display: 'toggle' 
        }, 'fast'); 
        return status = 'closed'; 
       } 
      }); 
      menuInitialized = true; 
     } 

    } else if ((width < 800) && (width > 550)) { 
     if (menuInitialized) { 
      $('.icon-menu-2').on('click', function(event) { 
       alert('large'); 
       if (status === 'closed') { 
        $menu.animate({ 
         width: 185, 
         marginLeft: 0, 
         display: 'toggle' 
        }, 'fast'); 
        $(".top_right, .c_right, .c_myaccount, .header_image, .c_footer, .copyright, .accepts").animate({ 
         marginLeft: 185, 
         display: 'toggle' 
        }, 'fast'); 
        $(".myaccount, .header_logo").animate({ 
         marginRight: -185, 
         display: 'toggle' 
        }, 'fast'); 
        return status = 'open'; 
       } else if (status === 'open') { 
        $menu.animate({ 
         width: 0, 
         marginLeft: -185, 
         display: 'toggle' 
        }, 'fast'); 
        $(".top_right, .c_right, .c_myaccount, .header_image,.c_footer, .copyright, .accepts").animate({ 
         marginLeft: 0, 
         display: 'toggle' 
        }, 'fast'); 
        $(".myaccount, .header_logo").animate({ 
         marginRight: 0, 
         display: 'toggle' 
        }, 'fast'); 
        return status = 'closed'; 
       } 
      }); 
      menuInitialized = false; 
     } 
    } 
} 
$(document).ready(doMenu); 
$(window).resize(doMenu); 

Answer 1

Ive besoin de délier la fonction clic-à-dire: $('.icon-menu').unbind('click');

Answer 2

Mettez tous vos js/jquery dans le document prêt:

$(document).ready(

    // Init 
    var menuInitialized = false; 
    doMenu(); 

    // Resize event 
    $(window).resize(doMenu); 

    // doMenu function 
    function doMenu() { 

     if (!menuInitialized) { 
      menuInitialized = true; 

      if (width < 550) { 
       alert('small') 
      } else if ((width < 800) && (width > 550)) { 
       alert('large') 
      } 
     } 
    } 

); 

Answer 3

Je pense que vous n'êtes pas mettre à jour la valeur de width.

donc à l'intérieur de la fonction que vous devriez obtenir la nouvelle largeur de l'objet

function doMenu() { 
    width = some_value // Get the width of the desired object 

    // Your code here... 
}