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

Question

我正在使用 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.

任何帮助是极大的赞赏。

谢谢

Answer 1

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

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

$("#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