Question

我正在使用Material Design Lite在Web视图中为应用创建UI但是我遇到了一个无法在滑动时部署导航抽屉的问题。

我正在使用此jquery代码来识别滑动事件

  $(function() {      
      $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
          $(this).text("Event Triggered" );  
        },
      });
    });

从这里我不知道如何打开导航抽屉。我更希望整个屏幕“可以滑动”，尤其是左边缘。当触发此滑动处理程序时，如何打开导航栏？

Answer 1

我试图在演示材料设计精简版http://www.getmdl.io/templates/dashboard/index.html中添加此效果。所以我找到的解决方案是通过材料设计精简版生成的类“mdl-layout__drawer-button”来模拟汉堡按钮的click事件。

$(function() {      
    $("#test").swipe( {
        //Generic swipe handler for all directions
        swipeRight:function(event, direction, distance, duration, fingerCount) {
            $(".mdl-layout__drawer-button").click();                        
        },
    });
});

Answer 2

打开/关闭sidenav document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();

滑动时打开导航抽屉（Material Design Lite）

2 个答案: