Jquery在手机上左右滑动

Question

我想用jquery mobile左右滑动。当我点击左侧的刷卡时，打开抽屉，右侧关闭抽屉。目前我按上面的按钮和菜单功能是用来打开菜单我想通过使用jquery中的滑动功能来做到这一点。请帮助

的Html的div：

<div class="DinM-navbar-header "> 
     <img src="" data-target=".DinM-navbar-collapse" data-toggle="collapse" class="DinM-navbar-toggle" alt="menu-icon" /> 
    </div> 
    <div class=""> 
     <%=HTML %> 
    </div> 

JavaScript函数：

function ShowMenu() { 
      var mainmenu = $(".DinM-main-menu"); 
      if (($(window).width() <= 991 && mainmenu.parent().attr('id') != "mobile")) { 
       $("#main-wrapper").animate({ 
        left: "0px" 
       }); 
       $("#mobile").html(mainmenu.clone()); 
       $(".DinM-main-menu", $(".DinM-top-menu")).remove(); 
       $(".DinM-main-menu").css("z-index", "-1").hide(); 
       $("#main-wrapper").css("min-height", $(".DinM-main-menu").height()); 
      } else if ($(window).width() > 992 && mainmenu.parent().attr('id') == "mobile") { 
       mainmenu.insertAfter($(".DinM-navbar-header ")); 
       mainmenu.show(); 
       $("#mobile").html(''); 
      } 

$(document).ready(function() { 
     $("body").wrapInner("<div id='main-wrapper' class='content-left' ></div>").append("<div id='mobile' ></div>"); 
     $(".DinM-main-menu").removeClass('DinM-hide'); 
     ShowMenu(); 
    }); 

Answer 1

https://api.jquerymobile.com/swipeleft/

https://api.jquerymobile.com/swiperight/

向左滑动事件：

jQuery(window).on("swipeleft", function(event) 
    { 
    hideMenu(); 
    }); 

向右滑动，即可事件：

jQuery(window).on("swiperight", function(event) 
{ 
    ShowMenu(); 
}); 

Answer 2

很老的问题，但它可以帮助别人谁想要一个简单的代码来获得交换事件在JavaScript中，没有任何依赖性。希望它能帮助别人。

在 swipe.js

简单

见脚本的HTML标记来使用：

<div id="touchsurface1" class="touchsurface" onSwap="touchsurfaceSwap(event)"></div> 

在JavaScript中使用：

touchsurface = document.getElementById('touchsurface2'); 
touchsurface.addEventListener("swap", function(event){alert('Swaped ' + event.detail.direction + ' at ' + event.target.id);}, false); 

演示页：https://vikylp.github.io/swipe/