Инициализирующая функция изменения размера браузера JQuery

Question

У меня есть функция ниже, которая работает так, как ожидалось, на готовом документе, но при изменении размера она не регистрирует изменение размера и выполняет предупреждение о размере до изменения размера. Ive добавил menuInitialized в качестве флага, чтобы попытаться устранить проблему, но теперь она инициализируется несколько раз. Например, он будет предупреждать «Малый», «Большой», «Маленький». Если я изменил размер браузера несколько раз.

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, необходимое для отвязать функции нажмите Ie: $('.icon-menu').unbind('click');

Answer 2

Положите все ваши JS/JQuery в документе готовый:

$(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

Я ожидаю, что вы не обновляет значение width.

Так внутри функции вы должны получить новую ширину объекта

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

    // Your code here... 
}