轻扫打开导航抽屉（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" );  
        },
      });
    });

从这里我不确定如何打开导航抽屉。我宁愿让整个屏幕 "swipeable" 尤其是左边。触发此滑动处理程序后，如何打开导航栏？

Answer 1

我试图在演示 material design lite http://www.getmdl.io/templates/dashboard/index.html 中添加这种效果。所以我找到的解决方案是通过 material design lite.

生成的 class "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

到open/closesidenavdocument.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();

轻扫打开导航抽屉（Material Design Lite）

Open navigation drawer on swipe (Material Design Lite)

javascript

jquery

swipe-gesture

material-design-lite