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

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中添加这种效果。所以我找到的解决方案是通过material design lite生成的类“mdl-layout__drawer-button”来模拟汉堡包按钮的点击事件。

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

Answer 2

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