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

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

非常感谢任何帮助。

由于

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

如何按屏幕大小设置不同的mmenu选项？

1 个答案: