0

我试图让一个菜单在单击图标时从左侧滑入和滑出。我可以毫无问题地工作，但是我需要根据浏览器大小使菜单的行为略有不同。因此，我需要知道文档准备好和调整大小时的浏览器宽度。我似乎根本无法正常工作，它要么没有根据屏幕尺寸激活正确的“点击”功能，要么激活了多次。我尝试了以下许多不同的变体。任何人都可以帮忙。我创建了一个 jsFiddle： http : //jsfiddle.net/cDppA/42/init

 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);
4

1 回答 1

1

每次使用 时.on('click', function(){})，都会为 click 事件添加一个绑定，而不是像我假设的那样替换它。所以最终发生的是它在点击时被调用了几次。您可以在再次绑定之前取消绑定 click 事件，使用$('.icon-menu').unbind('click');. 我在这里只修改了你小提琴上的第 5 行

此外，我的屏幕大于 800 像素，因此如果我在屏幕最大化时单击，则不会发生任何事情，因为您的 if 条件都不涵盖 >800 。

让我知道它是否有效或者您有任何问题:)

于 2013-04-15T10:22:26.370 回答