Question

我创建了一个左侧带有侧边栏的网站，您可以通过单击菜单图标或通过＆＃34;拖动＆＃34;来显示。（这是一个轻扫，说实话）右边的图标。

现在，代码为：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

Answer 1

这是鼠标独有的问题。如果您使用鼠标拖动，则在菜单打开时释放，它将完成单击...

...看到菜单打开后会关闭它。

如果使用触摸设备进行测试，您将看到点击未完成其事件，菜单按预期运行。如果您恰好在项目中使用了modernizr https://modernizr.com，则只需启用滑动即可触摸设备：

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

P.S。我看到现代化的最新版本不再支持该特定测试了。他们使用touchevents类并测试。 https://modernizr.com/docs

jquery - 侧边栏滑动问题

1 个答案: