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

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

我使用这个jQuery代码来识别刷卡事件

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

从这里我不知道如何打开抽屉式导航栏。我宁愿让整个屏幕“可以滑动”，尤其是左边缘。如何在触发此刷卡处理程序时打开导航栏？

来源

2015-07-11 Isaacm

我试图在演示材料设计精简版http://www.getmdl.io/templates/dashboard/index.html中添加此效果。所以我找到的解决方案是通过材质设计精简版生成的类“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();       
     }, 
    }); 
});

来源

2015-07-13 05:20:02 user3257770

能不能请你重写你的答案适合开门红需求，而不只是应对自己的网站的一些代码。这将有助于揭幕战和其他读者，因为他们可以理解你的意思。 – bish

这个解决方案适用于一个款待，我编辑它以适应我在原始帖子中使用的示例。谢谢 – Isaacm

你如何使用MDL轻扫手势？像它这样的Loos不支持开箱即用的手势。 – mu3

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

来源

2018-02-23 11:58:54 ivanproskuryakov

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

回答

相关问题