javascript - 如何在JQM网站中使用touchSwipe事件来滑动div

Question

我有一个适用于点击事件的简单 slider 。然后我尝试在刀槽花纹 left right 上添加相同的效果。但我很难做到这一点

这是fiddle我创建的。

我正在使用 swipeTouch 插件来实现手势。

如果有人可以更新 fiddle 以使用滑动手势达到相同的效果将非常有帮助。

脚本

$(".fieldset").swipe({
    swipe: function (event, direction, distance, duration, fingerCount) {
        // $(this).text("You swiped " + direction );

        if (direction == 'right') {
            console.log("You swiped " + direction);
        }
    }
});

$('ul li.fieldset').each(function () {
    var h = $(this).height();
    var next_height = $(this).next('.hidenset').height();
    var diff = h - next_height;
    console.log('The height of li:' + h);
    $(this).next('.hidenset').css('height', h + 'px');
    $(this).next('.hidenset').css('margin-top', -h + 'px');

});

$(".fieldset a").click(function () {
    parent = $(this).parent('.fieldset');
    $('.fieldset').not(parent).removeClass('left-slide').addClass('right-slide');

    if ($(parent).hasClass('left-slide')) {
        $(parent).removeClass('left-slide').addClass('right-slide');
    } else {
        $(parent).removeClass('right-slide').addClass('left-slide');
    }

    form = $(parent).attr('id');
    var arr = form.split('_');
    var menu = '#menu_' + arr[1];

    $('.hidenset').not(menu).removeClass('menu-open').addClass('menu-close');

    if ($(menu).hasClass('menu-open')) {
        $(menu).removeClass('menu-open').addClass('menu-close');
    } else {
        $(menu).removeClass('menu-close').addClass('menu-open');
    }

});

感谢和问候

Answer 1

给你:

Updated FIDDLE

$(".fieldset").swipe({
  swipe:function(event, direction, distance, duration, fingerCount) {
   // $(this).text("You swiped " + direction );
   alert("You swiped " + direction );
   if(direction == 'right') {
       //only slide if menu is open
       if($(this).hasClass('left-slide')) {
           $(this).find("#sub2").click();
       }
   } else if (direction == 'left') {
       //only slide if menu is closed
       if($(this).hasClass('right-slide')) {
           $(this).find("#sub2").click();
       }
   }
  }
});

您检查滑动方向并查看菜单是否已处于适当的状态。如果没有，则在fieldset中找到按钮并触发点击事件。