Question

我有一个适用于点击事件的简单滑块。然后我试图在左边的刀槽花纹上添加相同的效果。但是我很难做到这一点

以下是我创建的fiddle。

我正在使用swipeTouch插件进行手势。

如果有人可以使用滑动手势更新小提琴来做同样的效果会非常有帮助。

脚本

$(".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');
    }

});

谢谢＆amp;问候

Answer 1

你走了：

更新了 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();
       }
   }
  }
});

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

Answer 2

基于@ezanker提供的答案

我的答案适用于那些尝试使用Jquery Mobile + TouchSwipe的人。

如果我们只使用swipe:function(event, direction, distance, duration, fingerCount) {}函数，那么它会影响JQM的其他touch事件，因为它是JQuery的触摸优化版本。

<强>脚本

$(".fieldset").swipe({
                  swipeLeft: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is open
                if ($(this).hasClass('right-slide')) {

                $(this).find(".anchor1").click();
            }
        },
     swipeRight: function (event, direction, distance, duration, fingerCount) {
            //only slide if menu is closed
            if ($(this).hasClass('left-slide')) {
                $(this).find(".anchor1").click();
            }
        }
});

我使用了touchSwipe，因为 JQM 的swipeleft和swiperight事件在浏览器中无法正常响应

希望对某人有帮助

如何在JQM网站中将touchSwipe事件用于滑动div

2 个答案: