如何按屏幕尺寸设置不同的菜单选项？

【问题标题】：How do I set different mmenu options by screen size?如何按屏幕尺寸设置不同的菜单选项？
【发布时间】：2013-08-17 23:50:26
【问题描述】：

我正在使用 mmenu (http://mmenu.frebsite.nl) 创建我的移动菜单。我像这样实现我的 jQuery 代码：

 $('.mobile-menu .menu-block-wrapper').attr('id', 'menu-left');
 $('.mobile-menu .menu-block-wrapper').mmenu({
     configuration: {
         selectedClass: "active",
         menuNodetype: "div",
     },  
     dragOpen : { 
         open: false,
         threshold  : 100 
     }   
 }); 
 $(".mobile-menu-trigger").trigger("open");

我想，当我的浏览器窗口小于 720 像素时，将 dragOpen 设置为 true，当我切换回正常分辨率时，将其设置回 false。

非常感谢任何帮助。

谢谢

【问题讨论】：

标签： javascript jquery hammer.js adaptive-design mmenu

【解决方案1】：

插件在触发时初始化拖动。所以你不能在插件被触发后更新选项。

我猜你可以将一个函数绑定到dragleft、dragright、dragup 和dragdown 事件，这些事件测量浏览器宽度，如果大于720 像素，则阻止传播。像这样的：

$("#page").on("dragleft dragright dragup dragdown", function( event ) {
    if ( $(window).width() > 720 ) {
        event.stopImmediatePropagation();
        event.gesture.stopImmediatePropagation();
    } else {
        // the plugin will fire its events bound to dragleft/dragright/dragup/dragdown
    }
});
$('.mobile-menu .menu-block-wrapper').mmenu({
    drag: {
        open: true,
        treshold: 100
    }
});

不确定这是否可行，但在使用hammer.js 时看到了这个问题： https://github.com/EightMedia/hammer.js/issues/333

【讨论】：