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。

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