jquery - 边栏滑动问题

我在左边创建了一个带有侧边栏的网站，您可以通过单击菜单图标或通过“拖动”（这是一个滑动，说实话）显示相同的图标对。jquery - 边栏滑动问题

现在，这里的代码：codepen.io/nickimola/pen/reOBYN?editors=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

来源

2016-03-03 Nick

这是一个独特的问题用鼠标。如果你用鼠标拖动，当你释放菜单打开时，它将完成点击...

...当看到菜单打开将关闭它。

如果您使用触控设备进行测试，您将看到点击无法完成其事件，并且菜单按预期运行。如果你碰巧已经在你的项目中使用Modernizr的，你可以简单地只启用触摸设备的刷卡像这样：

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

附：我发现最新版本的modernizr不再支持这个特定的测试。他们使用touchevents类并测试。 https://modernizr.com/docs

来源

2016-03-03 21:57:11

我其实很喜欢在桌面上使用“可拖动”边栏的想法。但是，如果这会导致问题，我只会去modernizr，并且只能在触摸设备上启用它 – Nick

我明白。那么您只需要一些方法来检测是否触摸或指针事件开始滑动并忽略相关的点击完成。必须有一个这样的图书馆，我只是没有意识到这一点。 –

你认为这样的事情会起作用吗？ http://jsbin.com/ijicoh/1/edit?html,css,js,output基本上检测侧边栏导航的结束，然后激活隐藏边栏的位（如果点击叠加层...或者甚至可以使用超时？ – Nick

jquery - 边栏滑动问题

回答

相关问题