jquery -侧边栏滑动问题

Question

我正在创建一个网站，左侧有一个侧边栏，您可以通过单击菜单图标或“拖动”(老实说，这是一个滑动)向右显示相同的图标。

现在，这里的代码：Codemen.io/nickimola/pen/reOBYN?编者=0010

正如您所看到的，当您释放鼠标时，它会自动关闭。

我认为问题是由于覆盖，通过代码应该关闭侧边栏时，点击(我注意到，如果您启动对图标的滑动，保持鼠标按钮向下，移动鼠标在侧边栏上，然后释放鼠标，侧栏保持在原地。

在这里，有一些代码(但请参考笔，因为它更完整)：

$(document).ready(function() {
    $(document).on('click', function(e) {

        if ( $(e.target).closest('.hamburger').length > 0 ) {
              $('body').toggleClass('no-scroll');
        $('.hamburger').toggleClass('open');
        $('.leftSidebar').toggleClass('visible');
        } else if ( $(e.target).closest('.leftSidebar').length === 0 && $('.leftSidebar').hasClass('visible') ) {
              $('body').removeClass('no-scroll');
        $('.hamburger').removeClass("open");
        $('.leftSidebar').removeClass("visible");
        }
    });
    $('.hamburger').swipe({
        swipeStatus: function (event, phase, direction, distance, duration, fingers) {
            if (phase == "move" && direction == "right") {
                          $('body').addClass('no-scroll');
                  $('.hamburger').addClass('open');
                    $('.leftSidebar').addClass('visible');
                return false;
            }
            if (phase == "move" && direction == "left") {
                          $('body').removeClass('no-scroll');
                  $('.hamburger').removeClass('open');
                    $('.leftSidebar').removeClass('visible');
                return false;
            }
        },
        threshold: 20
    });
});

对于滑动，我使用这个库：jQuery.touchSwipe

Answer 1

这对于鼠标来说是唯一的问题。如果用鼠标拖动，在打开菜单时释放，它将完成单击.

...which一看到菜单打开，就会关闭它。

如果您使用触摸设备进行测试，您将看到单击没有完成其事件，并且菜单按预期操作。如果您碰巧已经在您的项目中使用了现代化的https://modernizr.com，您只需为这样的触摸设备启用滑动：

$('html.touch .hamburger').swipe({

我看到最新版本的现代化不再支持这个测试了。他们使用touchevents类并进行测试。https://modernizr.com/docs