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');解决此问题，在再次绑定之前取消绑定点击事件。我只在你的小提琴here

上修改了第5行

此外，我的屏幕大于800px，因此如果我在屏幕最大化时单击，则没有任何反应，因为您的任何条件都不会覆盖＆gt; 800。

让我知道它是否有效或是否有任何问题：）

JQuery启动文件准备和调整大小的功能

1 个答案: