JQuery啓動文檔準備就緒並調整大小功能

Question

我試圖讓菜單在單擊圖標時從左側滑入和滑出。我得到這個工作沒有問題，但我需要讓菜單行爲略有不同，取決於瀏覽器的大小。因此，我需要知道文檔準備就緒和調整大小時的瀏覽器寬度。我似乎根本無法很好地工作，它不是根據屏幕尺寸激活正確的「onclick」功能，就是它激活了多次。我已經嘗試了以下許多不同的變體。任何人都可以協助。我創建了一個的jsfiddle：http://jsfiddle.net/cDppA/42/發起

var menuInitialized = false; 

function doMenu() { 
    var width = $(window).width(); 

    if (width < 550) { 

     if (!menuInitialized) { 
       $('.icon-menu-2').on('click', function (event) { 
      console.log('small'); 
       });  
      menuInitialized = true; 
     } 
    } else if ((width < 800) && (width > 550)) { 
     if (menuInitialized) { 
      $('.icon-menu-2').on('click', function (event) { 
      console.log('large'); 
       });  
      menuInitialized = false; 
     } 
    } 

} 
$(document).ready(doMenu); 
$(window).resize(doMenu); 

Answer 1

每次使用.on('click', function(){})時間，你添加綁定到click事件，而不僅僅是更換它，因爲我認爲你的預期。所以最終發生的事情是，它幾次點擊。您可以使用$('.icon-menu').unbind('click');解決此問題，然後再次綁定之前解除綁定單擊事件。我只修改了你的小提琴上的第5行here

此外，我的屏幕大於800px，所以如果我點擊當我的屏幕最大化時，沒有任何反應，因爲你的if條件都不包含> 800。

讓我知道，如果它的工作原理，或者如果您有任何疑問:)