Jquery在移动设备上向左或向右滑动答案

【问题标题】：Jquery swipe left or right on mobileJquery在移动设备上向左或向右滑动
【发布时间】：2015-10-26 06:12:54
【问题描述】：

我想使用 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();
    });

【问题讨论】：

如果能加个小提琴就更好了。

标签： javascript jquery html jquery-mobile

【解决方案1】：

非常老的问题，但它可以帮助其他想要简单代码的人在 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/

【讨论】：

【解决方案2】：

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

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

向左滑动事件：

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

向右滑动事件：

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

【讨论】：