Ngăn kéo điều hướng mở trên swipe (Material Design Lite)

Question

Tôi đang sử dụng Material Design Lite để tạo giao diện người dùng cho ứng dụng trong chế độ xem web tuy nhiên tôi đã gặp phải vấn đề mà tôi không thể triển khai ngăn điều hướng khi vuốt.

Tôi đang sử dụng mã jquery này để nhận ra sự kiện swipe

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

Từ đây tôi không chắc chắn làm thế nào để mở ngăn điều hướng. Tôi muốn có toàn bộ màn hình "swipeable" đặc biệt là cạnh trái. Làm cách nào để mở thanh điều hướng khi trình xử lý vuốt này được kích hoạt?

Answer 1

Tôi đã cố thêm hiệu ứng này vào bản thiết kế tài liệu demo, http://www.getmdl.io/templates/dashboard/index.html. Vì vậy, giải pháp tôi tìm thấy là mô phỏng sự kiện nhấp chuột của nút bánh hamburger, thông qua lớp "mdl-layout__drawer-button" được tạo ra bởi thiết kế material design.

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

Answer 2

Để mở/sidenav gần document.querySelector('.mdl-layout').MaterialLayout.toggleDrawer();